在锚点单击时显示/隐藏多个 div答案

【问题标题】：Show/Hide multiple divs on anchor click在锚点单击时显示/隐藏多个 div
【发布时间】：2012-12-30 17:47:39
【问题描述】：

单击锚点时，我需要显示/隐藏 3 个单独 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 类并将其添加到其他 div 中，从而在单击锚点时有效地打开和关闭内容。

如何扩展上面的代码来做我需要的事情？

提前谢谢..

【问题讨论】：

你能发个 jsFiddle 吗？
拜托，创建一个测试用例保持简单，我们没有时间阅读 Lorem ipsums 或其他内容。保持简单，更具可读性，人们会喜欢它。

标签： jquery show-hide

【解决方案1】：

您的遍历方法不正确，is-hidden 选择器也不正确（类缺少点前缀）

find() 在一个元素内搜索，但你想要的是元素本身

下面将介绍<a> 标签点击的情况。对于 is-hidden 类的其他元素，尚不清楚您想要什么行为。显然，如果它是隐藏的，你就不能点击它

试试这个

$('.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()干净

【讨论】：

【解决方案2】：

您可以使用选择器：可见，例如。

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

【讨论】：