Question

点击锚点时，我需要显示/隐藏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>

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>

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类，并将其添加到其他类中，有效地在单击锚点时打开和关闭内容。

如何扩展上述代码以满足我的需求？

提前致谢..

Answer 1

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

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

Answer 2

您的遍历方法不正确，因为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()

更清洁

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

2 个答案: