展开/折叠所有jQuery中

我有一大堆的内容标签的拥有扩大在各面板折叠图标。由于它是如此手动以关闭所有展开后的div，因此有一个expand all和collapse all按钮可以一次性展开和折叠。展开/折叠所有jQuery中

这是按预期工作。但是，我需要添加什么额外的是，

在页面加载我需要'collapse all'按钮具有不活动的类因为有没有展开页面时页面加载第一次。

，并在任何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类但这并不删除即使我检查了inactive类ifelse条件尝试扩展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

来源

2014-01-22 Sowmya

试图创建花费全部和崩溃，所有的一个按钮，当任何面板的消费，改变的名称和功能按钮折叠 - 所有，反之亦然。 –

无法创建单一的按钮堂妹这是 – Sowmya

见http://jsbin.com/ALudAWE/5/ – tewathia

我已经在你的代码做了不少修改，所以有可能是这样做的更好的方法。下面的代码：

$('.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

来源

2014-01-22 07:18:28 tewathia

是'长度=== 2'真的需要因为在我的情况下有n个面板（动态），在这里我只显示2例如 – Sowmya

我也写了2例如:)你可以用'$（'。content'）。length'替换2。请参阅http://jsbin.com/ALudAWE/32/ – tewathia

-1

EDITEDDDD
这是很容易

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

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

来源

2014-01-22 06:59:31

的follwing代码添加到您的代码。

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


});

来源

2014-01-22 07:01:18

不工作。我需要有默认的不活动类来折叠所有按钮，并在展开任何一个div时删除tat类。 – Sowmya

在你的答案中，这两个链接仍然在我的演示中工作，只有变化是expandall链接有不活动的类。 – Sowmya

然后添加页面加载时处于非活动状态的类。现在，当用户点击任何展开链接删除活动类，并显示崩溃链接 –

-1

并称collapse-inactive类页面加载使用这种自我执行的功能应该工作。

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

来源

2014-01-22 07:19:51 skshoyeb

尝试

//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

来源

2014-01-22 08:12:05

展开/折叠所有jQuery中

回答

相关问题