1

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

本质上，我想is-hidden从应用它的 div 中删除该类并将其添加到其他类中，从而在单击锚点时有效地打开和关闭内容。

我怎样才能扩展上面的代码来做我需要的事情？

提前致谢..

4

2 回答 2

0

您的遍历方法和选择器一样不正确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()

于 2012-12-30T17:55:54.967 回答
0

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

$('div:visible').addClass('is-hidden')
于 2012-12-30T17:52:32.620 回答