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

默认情况下通过添加if类来尝试else inactive条件，但即使我正在检查扩展div的条件，也不会删除inactive类。< / p>

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


});

Answer 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

Answer 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

Answer 4

EDITEDDDD
这很容易

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

如果类.collapse height:0px

，您可以使用toggleClass

Answer 5

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

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

在jquery中展开/折叠全部

5 个答案: