Question

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

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

由于

Answer 1

使用.siblings()查找类别为details的元素，该元素是链接父元素的兄弟。

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

DEMO

Answer 2

请改为尝试：

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

演示here。

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

因为<a>位于<h3>内，而<div>是<h3>的兄弟，而不是 {{1} }，您需要使用$.parent()选择<a>，然后使用$.next()获取<h3>之后的下一个元素，即您想要的<h3>切换。

更好的方法是将点击处理程序绑定到<div>。这简化了选择器链接，并消除了<h3>标记可能带来的任何问题。这会更好，IMO：

<a>

Answer 3

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

$(this).parent().parent().find('.details').toggleClass("display");

Answer 4

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

$('.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);    
    }
});

定位类的单个实例

4 个答案:

Working example

Animated Example