Question

我正在寻找一种方法来实现“全部展开”和“全部折叠”按钮，以便与Darren Ingram的Simple Collapsible Panel jQuery插件一起使用。

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

是否有人知道如何评估a是展开还是折叠，并根据该答案导致折叠或展开？我似乎无法在这一点上获得牵引力。

谢谢，

阿恩

Answer 1

这将切换所有项目：

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

这将显示所有项目：

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

这将隐藏所有项目：

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

Answer 2

嗯，你试过了吗？

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

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

当你点击darrens面板时，我看到的唯一区别是显示属性从块变为无，因此显示和隐藏应该有效。

Answer 3

@Joseph和@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

如何使用Darren Ingram的Simple Collapsible Panel jQuery插件实现“全部展开”和“全部折叠”？

3 个答案: