如何使用Darren Ingram的Simple Collapsible Panel jQuery插件實現「Expand All」和「Collapse All」？

-1

我正在尋找一種實現「全部展開」和「全部摺疊」的按鈕，以便與Darren Ingram的Simple Collapsible Panel jQuery插件一起使用。如何使用Darren Ingram的Simple Collapsible Panel jQuery插件實現「Expand All」和「Collapse All」？

http://www.darreningram.net/pages/examples/jQuery/CollapsiblePanelPlugin.aspx

有誰知道如何評價是否展開或摺疊，並基於該回答引起要麼摺疊或展開？我似乎沒有能力獲得這方面的支持。

感謝，

阿恩

來源

2011-12-06 Arnold

您是否試過頁面上的大量示例代碼？ –

@moonbear。我已經嘗試了代碼，並在應用程序中使用該插件。 – Arnold

這將觸發所有項目：

$(".collapsibleContainerContent").slideToggle();

這將顯示所有項目：

$(".collapsibleContainerContent").slideDown();

這將隱藏所有的項目：

$(".collapsibleContainerContent").slideUp();

來源

2011-12-06 23:09:08

謝謝，明天我會試試這個。 – Arnold

不，這不適合我。 – Arnold

嗯，你有沒有嘗試過：

$('#COLLAPSEALL').click(function(){ 
    $('.collapsibleContainerContent').hide(slow); 
}); 

$('#EXPANDALL').click(function(){ 
    $('.collapsibleContainerContent').show(slow); 
});

當您單擊darrens面板我看到的唯一性差異爲：顯示屬性從塊變更爲無，所以顯示和隱藏應該工作。

來源

2011-12-06 23:14:22 rsan

謝謝，明天我會試一試。順便說一句，我在頁面上有三個可摺疊的面板。 – Arnold

不，這不適合我。 – Arnold

@Joseph and @rsan。儘管我喜歡這個插件，並且能夠很容易地實現它，但添加所需的「全部展開」和「全部摺疊」功能的方式讓我無法迴避，因此我沒有時間通過代碼搜索答案。我已經決定了一個更簡單的方法，這將允許我前進。我喜歡在LightCMS找到的模板。

jQuery(document).ready(function ($) { 
     $('.collapsible').hover(
     function() { 
      $(this).css('text-decoration', 'underline'); 
     }, 
     function() { 
      $(this).css('text-decoration', 'none'); 
     }); 

     $('.collapsible').next().hide(); 
     $('.collapsible').click(function() { 
      $(this).next().slideToggle(); 
     }); 
    });

保持簡單讓我寫：

$("#idSlideCollapsibleBlue").slideUp('slow');

其中idSlideCollapsibleBlue是位於只是一個H3下，像這樣一個div的id。

<h3 id="idCollapsibleBlue" class="collapsible" title="New">Telecom: Add New Users</h3> 
     <div id="idSlideCollapsibleBlue" title="Telecom: Add New Users">

感謝您檢查thiis。我很感激。

-Arnold

來源

2011-12-07 21:39:58 Arnold

如何使用Darren Ingram的Simple Collapsible Panel jQuery插件實現「Expand All」和「Collapse All」？

回答

相關問題