9

我正在使用 css 来隐藏我想要在用户单击链接时显示的内容。页面上有多个实例。

我已经设置了一个示例，但当前单击任何链接都会显示所有内容。

http://jsfiddle.net/paulyabsley/rHD43/

谢谢

4

4 回答 4

7

用于.siblings()查找类details是链接父元素的兄弟的元素。

$('.item h3 a').click(function () {
    $(this).parent().siblings(".details").toggleClass("display");
});​

演示

于 2012-07-01T22:35:05.413 回答
2

试试这个：

$('.item h3 a').click(function () {
    $(this).parent().next().toggleClass("display");
});​

演示在这里。

您当前的选择器正在做的是选择所有匹配的元素。上面的代码片段所做的是选择与被点击的元素相关的元素$(this)，在这种情况下，使用的是被点击的元素<a>。

因为<a>是在 内部<h3>，而是而不是的<div>兄弟，所以您需要使用选择，然后使用来获取 之后的下一个元素，即您要切换的 。<h3><a>$.parent()<h3>$.next()<h3><div>

这样做的更好方法是将您的点击处理程序绑定到<h3>。<a>这简化了选择器链接，并消除了标签可能存在的任何问题。这会更好，IMO：

$('.item h3').click(function () {
    $(this).next().toggleClass("display");
});​
于 2012-07-01T22:38:17.520 回答
2

您可以转到根元素并搜索详细信息。

$(this).parent().parent().find('.details').toggleClass("display");
于 2012-07-01T22:40:47.270 回答
0

一个稍微复杂一点的解决方案，但它提供了在您打开一个新描述时关闭其他描述的功能，我认为当前答案中缺少该描述。

$('.item h3 a').click(function () {
    // always try cache your selectors if you plan on using them repeatedly.
    var $details = $(this).parent().next("div.details");

    if ($details.hasClass('display')){
        // if the item we clicked on is already displayed - we want to hide it.
        $details.toggleClass("display");
    }else{
      // now we want to close all other open descriptions      
      $("div.details").removeClass("display");
      // and only display the one we clicked on.
      $details.toggleClass("display",true);    
    }
});​

工作示例

动画示例

于 2012-07-01T22:37:55.507 回答