显示/隐藏锚点上的多个div单击

单击锚点时，需要显示/隐藏3个单独的div的内容。显示/隐藏锚点上的多个div单击

的标记看起来像这样： 1区

<div class="media pull-left"> 
    <img src="img.jpg" /> 
</div> 
<div class="media pull-left is-hidden"> 
    <img src="img.jpg" /> 
</div>

2区

<div class="media-aside pull-right"> 
    <h4>heading 4</h4> 
    <p>Text...</p> 
    <p class="call-to-action"><a href="someurl">url</a></p> 
</div> 
<div class="media-aside pull-right is-hidden"> 
    <h4>heading 4</h4> 
    <p>Paragraph...</p> 
    <p class="call-to-action"><a href="someurl">url</a></p> 
</div>

股利3

<div class="media-thumb "> 
    <img src="thumb.jpg" /> 
    <p><a href="#">Link 1</a></p> 
</div> 
<div class="media-thumb is-hidden"> 
    <img src="thumb.jpg" /> 
    <p><a href="#">Link 2</a></p> 
</div>

jQuery的是这样的：

$('.media-thumb a').click(function(){ 
    $(this).parent().parent().find('is-hidden').toggle(); 
    return false; 
});

从本质上讲，我想从它应用到的div删除is-hidden类，并把它添加到其他人，点击锚时有效切换的内容和关闭。

如何扩展上述代码以完成我所需要的功能？

在此先感谢..

来源

2012-12-30 webworker

你可以发布jsFiddle吗？ –

请创建一个简单的测试用例，我们没有时间阅读Lorem ipsums或其他内容。保持简单，可读性更强，人们会喜欢它。 –

你遍历方法是不正确的，是一个元素中的is-hidden选择器（类漏点前缀）

find()搜索，但你想要的元素本身

下面将介绍情况为<a>标签单击。目前还不清楚你想要在is-hidden课程中使用其他元素的行为。显然，你不能在一个clcik如果它是隐藏

尝试这个

$('.media-thumb a').click(function(){ 
    /* if wanting to remove "is-hidden" from all others*/ 
    $('.is-hidden').removeClass('is-hidden').show(); 
    /* hide this one*/ 
    $(this).closest('.media-thumb').addClass('is-hidden').hide(); 

    return false; 
});

closest()将查找树，直到选择被发现。比parent().parent()更清洁

来源

2012-12-30 17:55:54 charlietfl

您可以使用选择：可见，EG。

$('div:visible').addClass('is-hidden')

来源

2012-12-30 17:52:32 Johny

显示/隐藏锚点上的多个div单击

回答

相关问题