展開/摺疊所有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中

回答

相關問題