Jquery：获取父元素，然后将css选择器应用于它

Question

我正在努力找出解决这个问题的最佳方法。我试图在页面上展开/折叠所有可隐藏的div。这通常没有问题，但是，我有四个单独的部分，需要扩展/折叠才能独立工作。因此，我希望不必使用四个单独的id作为选择器来编写四个单独的脚本。

我发现了这个

$(function() {
    $('.expand').click(function() {
        $('#test *').nextAll('.silent').slideToggle();
    });
});

工作得很漂亮，只要我只需要展开一个部分。所以，我的想法是这样的：如果我可以使用jquery来获取父div（包含展开按钮的父级）类或id（因为它们每个都必须不同），然后在执行之前将selector *类应用于它nextAll，那应该解决我的问题。

如果你想进一步澄清的话，这是我到目前为止的一个简单的小提琴。目标是能够使用每个部分的“展开”按钮来扩展下面的部分，而不扩展另一部分。 （使用单个脚本）jsfiddle

提前感谢您提供的任何帮助。

Answer 1

是。使用：

$('.expand').click(function(){
    $(this).parent().find('.silent').slideToggle();
});

Demo

Answer 2

我现在玩了很快，为你快速创造了一些东西:) http://jsfiddle.net/fedmich/6Rxzg/

它与您的代码不同，但您可以看到一个简单的代码。

您可以使用 nearest（）来获取与您的CSS模式匹配的父级。 你应该使用类名而不是id

<div class="expander">
   ...content...
</div>
<div class="expander">
   ...content...
</div>

一些提示：

1. 缩进代码并对其进行评论。
2. 而不是做一个YELL或SILENT，使用简单有意义的名字，如“显示”
3. 请仔细阅读jsfiddle，这样你就可以应用像光标一样的样式：手，别忘了留出足够的间距，
4. 仅展开那些尚未扩展的等等

更多提示：

1. 您还可以将+或 - 等图标显示为折叠或不显示 就像我在http://fedmich.com/resume/#work4
之前的简历页面上所做的那样

很抱歉答案很长。 做这样的手风琴总是很有乐趣！所以不要忘记有很多！

Answer 3

使用id测试在div上添加一些类，然后它会更简单。

<div id="test" class="SomeClass">
content here
</div>

<div id="test2" class="SomeClass">
content
</div>

尝试使用closest()，它将获取其id为test的父元素，然后使用class silent获取test的子元素并将其滑动：

$('.expand').click(function() {
        $(this).closest(".SomeClass").find('.silent').slideToggle();
    });

WORKING FIDDLE