在jQuery中展开/折叠全部答案

【问题标题】：expand/collapse all in jquery在jQuery中展开/折叠全部
【发布时间】：2014-01-22 06:53:47
【问题描述】：

我有一堆内容选项卡，每个面板都有展开折叠图标。由于一个一个地关闭所有展开的 div 非常手动，因此有一个全部展开和全部折叠按钮可以一次性展开和折叠。

这按预期工作。但是我需要补充的是，

在页面加载时，我需要 'collapse all' 按钮使类处于非活动状态，因为第一次加载页面时没有扩展 div。

当任何 div 展开时，应该从'collapse all' 按钮中删除非活动类，反之亦然。

这是我的代码

//expand/collapse all
$('.expandall-icon').click(function(){
        $(this).addClass('expand-inactive');
        $('.collapseall-icon').removeClass('collapse-inactive')
        $('.inner-content').slideDown();
    });
    $('.collapseall-icon').click(function(){
        $(this).addClass('collapse-inactive');
        $('.expandall-icon').removeClass('expand-inactive');
        $('.inner-content').slideUp();
    });     

    //Collapse and expand data
    $('.inner-content').hide();
    $(".expand a").click(function (e) {
        e.preventDefault();
        $(this).parent().toggleClass('collapse');
        $(this).closest('.content').find('.inner-content').slideToggle();   
    });

还有DEMO

通过默认添加 inactive 类尝试使用 if else 条件，但这不会删除 inactive 类，即使我正在检查扩展 div 的条件。

    //expand/collapse all
$('.expandall-icon').click(function(){
        $(this).addClass('expand-inactive');
        $('.collapseall-icon').removeClass('collapse-inactive')
        $('.inner-content').slideDown();
    });
$('.collapseall-icon').addClass('collapse-inactive');
    $('.collapseall-icon').click(function(){
        $(this).addClass('collapse-inactive');
        $('.expandall-icon').removeClass('expand-inactive');
        $('.inner-content').slideUp();
    });     

    //Collapse and expand data
    $('.inner-content').hide();
    $(".expand a").click(function (e) {
        e.preventDefault();
        $(this).parent().toggleClass('collapse');
        $(this).closest('.content').find('.inner-content').slideToggle().toggleClass('datapanel_opend');    

      //expand all
         if(!$(this).closest('.content').find('.inner-content').hasClass("datapanel_opend"))
        {
           $('div.collapseall-icon').removeClass('collapse-inactive');
        }
        else
        {
            $('div.collapseall-icon').addClass('collapse-inactive');
        }

    });

DEMO 2

【问题讨论】：

尝试为全部展开和全部折叠创建一个按钮，当任何面板展开时，将按钮的名称和功能更改为全部折叠，反之亦然。
不能创建单个按钮，因为这是要求
见jsbin.com/ALudAWE/5
见jsfiddle.net/arunpjohny/7xaUB/2
@ArunPJohny 酷。看起来就是这样。。谢谢。让我试试

标签： jquery html css

【解决方案1】：

将以下代码添加到您的代码中。

var k = 0;
if(k == 0){
$('.collaspeall-icon').addClass('collapse-inactive');
$('.expandall-icon').removeClass('collapse-inactive');
k = 1;
}

if(k == 1){
$('.expandall-icon').addClass('collapse-inactive');
$('.collapseall-icon').removeClass('collapse-inactive');
k = 0;
}

替代解决方案

$('.collapseall-icon').addClass('collapse-inactive');//added when page loads.


$('.expand').click(function(){

$('.collapseall-icon').removeClass('collapse-inactive');


});

【讨论】：

不工作。默认情况下，我需要有非活动类来折叠所有按钮并在展开任何一个 div 时删除 tat 类。
在你的回答中，两个链接仍然像我的演示一样工作，唯一的变化是 expandall 链接有非活动类。
然后在页面加载时添加非活动类。现在，当用户单击任何展开链接时，删除活动类并显示折叠链接
我什至尝试过这种方式，添加 if else 条件，但这不会在打开 div 时删除非活动类。请在这里查看演示jsbin.com/aQiNEpEW/2
所以我现在有另一个代码，请在此处查看替代解决方案。

【解决方案2】：

我已经对您的代码进行了很多修改，因此可能有更好的方法来做到这一点。代码如下：

$('.collapseall-icon').addClass('collapse-inactive');

$('.expandall-icon').click(function () {
    $(this).addClass('expand-inactive');
    $('.collapseall-icon').removeClass('collapse-inactive')
    $('.inner-content').slideDown();
    $('.expand').removeClass('collapse');
});

$('.collapseall-icon').click(function () {
    $(this).addClass('collapse-inactive');
    $('.expandall-icon').removeClass('expand-inactive');
    $('.inner-content').slideUp();
    $('.expand').addClass('collapse');
});

$('.inner-content').hide();

$(".expand a").click(function (e) {
    e.preventDefault();
    $(this).parent().toggleClass('collapse');
    $(this).closest('.content').find('.inner-content').slideToggle();
    if ($('.collapse').length === $('.content').length) {
        $('.collapseall-icon').addClass('collapse-inactive');
        $('.expandall-icon').removeClass('expand-inactive');
    } else if ($('.collapse').length === 0) {
        $('.expandall-icon').addClass('expand-inactive');
        $('.collapseall-icon').removeClass('collapse-inactive');
    } else {
        $('.expandall-icon').removeClass('expand-inactive');
        $('.collapseall-icon').removeClass('collapse-inactive');
    }
});

DEMO

【讨论】：

真的需要length === 2，因为在我的情况下，有n个面板（动态），这里我只展示了2个
例如我也写了 2 :) 你可以用 $('.content').length 替换 2。见jsbin.com/ALudAWE/32

【解决方案3】：

试试

//expand/collapse all
$('.expandall-icon').click(function () {
    $(this).addClass('expand-inactive');
    $('.collapseall-icon').removeClass('collapse-inactive')
    $('.inner-content').slideDown();
});
$('.collapseall-icon').click(function () {
    $(this).addClass('collapse-inactive');
    $('.expandall-icon').removeClass('expand-inactive');
    $('.inner-content').slideUp();
}).addClass('collapse-inactive');

//Collapse and expand data
var $inners = $('.inner-content').hide();
$(".expand a").click(function (e) {
    e.preventDefault();
    var $parent = $(this).parent().toggleClass('collapse');
    if ($parent.hasClass('collapse')) {
        if ($('.expand').not('.collapse').length == 0) {
            $('.collapseall-icon').addClass('collapse-inactive')
        }
        $('.expandall-icon').removeClass('expand-inactive');
    } else {
        if ($('.expand.collapse').length == 0) {
            $('.expandall-icon').addClass('expand-inactive');
        }
        $('.collapseall-icon').removeClass('collapse-inactive')
    }
    $(this).closest('.content').find('.inner-content').slideToggle();
});

演示：Fiddle

【讨论】：

【解决方案4】：

EDITEDDDD
这很容易

$('.content .inner-content').slideToggle();

如果类.collapse height:0px，你可以使用toggleClass

【讨论】：

【解决方案5】：

使用此自执行功能在页面加载时添加 collapse-inactive 类应该可以工作。

function(){
  $('.collapseall-icon').addClass('collapse-inactive');
}();

【讨论】：