jquery - 在 jquery 中全部展开/折叠

Question

我有一堆内容选项卡，每个面板中都有展开折叠图标。由于一个一个地关闭所有展开的 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

Answer 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');


});