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>

我希望页面上有一些区域可以关闭外部折叠中的filterArea崩溃类？还是类似的？我解释这个问题并不是很好！ - 所以，如果我有两个崩溃类的div，当我点击它们时，那个div的filterarea崩溃

汤姆

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

jQuery单独切换多个区域

1 个答案: