javascript - jQuery 单独切换多个区域

Question

我使用 jQuery 只需一个切换即可显示和隐藏网站上的区域。效果很好，但如果我有多个元素，我想在页面上单独显示和隐藏，我必须为每个项目编写一些 jQuery。有没有办法对封装类中的类或 ID 执行此操作？

这是我的 jQuery:

 jQuery('.collapse').click(function() {


        jQuery('#filterArea').toggle('slow', function() {

        });

    });

这是我的内容:

<div class="tabs"> 
    <div class="ui-widget-header">
        <div class="collapse" id="boxId">Content Box</div>

    </div><br />
        <div class="addPadLeftNoFloat" id="filterArea">

            <p>Content for box</p>

        </div>              
</div>

我希望能够在页面上有一些具有折叠类别的区域，仅关闭外部折叠内的过滤器区域？或者类似？我没有很好地解释这一点! - 因此，如果我有两个具有折叠类别的 div，当我单击它们时，该 div 的过滤区域会折叠

汤姆

Answer 1

不要将 filterArea 作为 id，而是将其更改为一个类。

<div class="tabs"> 
    <div class="ui-widget-header">
        <div class="collapse" id="boxId">Content Box</div>
    </div>

    <br />
    <div class="addPadLeftNoFloat filterArea">
        <p>Content for box</p>
    </div>              
</div>

还将您的 JavaScript 更改为:

jQuery('.collapse').click(function() {
    jQuery('.filterArea').toggle('slow', function() {

    });
});

A working example .

编辑:如果您只想折叠 .filterArea 元素及其封闭的 .tab 元素，请使用 JavaScript，如下所示:

$('.collapse').click(function() {
    $(this).closest('.tabs').find('.filterArea').toggle('slow');
});

Updated example .