寻找类似于 Accordion 的 JQuery 插件，但允许同时打开多个部分 [关闭]答案

【问题标题】：Looking for a JQuery plug-in similar to Accordion, but that allows multiple sections open at once [closed]寻找类似于 Accordion 的 JQuery 插件，但允许同时打开多个部分 [关闭]
【发布时间】：2009-10-27 00:06:48
【问题描述】：

我希望有一个类似于 JQUERY Accordion 插件提供的 UI 元素，但允许用户同时打开多个部分。

文档有以下内容，并建议使用代码 sn-p 的替代方法（见下文）。这很好，他们提供的代码基本上可以工作，但我发现自己重新创建了很多内置在插件中的东西，比如切换类和在 XHTML 中手动应用主题。

我的问题：

在我沿着手动路线走得太远之前，有没有人知道类似的插件，或此插件的 mod 以允许同时打开多个面板？
对于允许多个打开面板的手风琴式控件是否有另一个通用名称，我可以使用谷歌搜索其他选项？

如果重要的话，这是我之前从文档中引用的部分。

注意：如果您想同时打开多个部分，请不要使用手风琴

手风琴不允许同时打开多个内容面板，而且要做到这一点需要付出很多努力。如果您正在寻找一种允许打开多个内容面板的小部件，请不要使用它。通常它可以用几行 jQuery 来代替，如下所示：

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle();
        return false;
    }).next().hide();
});

Or animated:

jQuery(document).ready(function(){
    $('.accordion .head').click(function() {
        $(this).next().toggle('slow');
        return false;
    }).next().hide();
});

【问题讨论】：

标签： jquery jquery-plugins

【解决方案1】：

感谢大家的建议，但我终于自己找到了完全符合我要求的东西。我将其添加为其他任何需要类似内容的人的答案。

解决方案
使用代码和示例 XHTML here 您可以扩展 JQuery Accordion plug-in 以同时打开多个面板并保持插件提供的主题和其他功能，而无需重新创建样式。

有关完整示例，请参阅上面链接的站点，但这里是使手风琴控件允许打开多个面板所需的代码的核心。使用与插件文档中描述的相同的 HTML 来定义标题和内容

    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/trunk/ui/ui.accordion.js"></script>
    <script type="text/javascript">
    $(function() {
        $("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons")
        .find("h3")
            .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
            .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
            .click(function() {
                $(this).toggleClass("ui-accordion-header-active").toggleClass("ui-state-active")
                    .toggleClass("ui-state-default").toggleClass("ui-corner-bottom")
                .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s")
                .end().next().toggleClass("ui-accordion-content-active").toggle();
                return false;
            })
            .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();
    })
    </script>

【讨论】：

嗨@JohnFx，我需要相同的功能，但在回发时我想保持部分的打开/关闭状态。任何帮助谢谢。

【解决方案2】：

我做了一个 jQuery 插件，它的外观与 jQuery UI Accordion 相同，并且可以保持所有选项卡\部分打开

你可以在这里找到它

http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

使用相同的标记

<div id="multiOpenAccordion">
        <h3><a href="#">tab 1</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
        <h3><a href="#">tab 2</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
</div>

Javascript 代码

$(function(){
        $('#multiOpenAccordion').multiAccordion();
       // you can use a number or an array with active option to specify which tabs to be opened by default:
       $('#multiOpenAccordion').multiAccordion({ active: 1 });
       // OR
       $('#multiOpenAccordion').multiAccordion({ active: [1, 2, 3] });

       $('#multiOpenAccordion').multiAccordion({ active: false }); // no opened tabs
});

更新：该插件已更新以支持默认的活动标签选项

【讨论】：

你不需要这个插件...stackoverflow.com/a/10237915/222564

【解决方案3】：

正如 Matthew Brown 所说，最好的解决方案是每个部分使用 1 个手风琴。

$( "#accordion1" ).accordion({ collapsible: true });
$( "#accordion2" ).accordion({ collapsible: true });
$( "#accordion3" ).accordion({ collapsible: true });

【讨论】：

【解决方案4】：

大概为 1.8.5 更改了一些内容。

移动切换按钮修复了状态更改问题（单击显示、单击不隐藏、单击隐藏、单击显示、单击隐藏...）类有些不匹配 jquery 的模板和渲染受到影响

    $(".colapse").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons")
  .find("h3")       
          .addClass("ui-accordion-header ui-helper-reset ui-corner-all ui-state-default")
          .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
          .click(function() {
              $j(this).toggleClass("ui-accordion-header-active").toggleClass("ui-corner-all").toggleClass("ui-corner-top").toggleClass("ui-state-active")
                          .toggleClass("ui-state-default")
                  .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s")
                  .end().next().toggle().toggleClass("ui-accordion-content-active");
              return false;
          })
          .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();

【讨论】：

【解决方案5】：

我修改了上周在网上找到的一些代码，以寻找类似的解决方案。这假设每个手风琴都是一个嵌套的无序列表。要使这项工作正常进行，您的每个手风琴都必须有唯一 ID。这是一个例子：

HTML

<ul id="uniqueAccordion1" class="menu">
    <li class="noaccordion">
        <a href="#">Top Level 1</a>
        <ul>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Top Level 2</a>
        <ul>
            <li><a href="#">Sub 3</a></li>
            <li><a href="#">Sub 4</a></li>
        </ul>
    </li>
</ul>

JS

$(function() {
    // initialize admin menu
    loadNav();
});
function loadNav() {
    // initially show opened
    $.each($('ul.menu'), function(){
        $('#' + this.id + ' .expandfirst ul:first').show();
    });

    // watch for click
    $('ul.menu li > a').click(function() {
        var $this = $(this);
        var $parent = $this.parent();
        if ($parent.hasClass('noaccordion')) {
            return false;
        }
        var $checkElement = $this.next();
        if ($checkElement.is('ul')) {
            $checkElement.slideToggle('fast');
        }
        return false;
    });
}

您将需要自己的 CSS 来支持这一点，但它允许任意数量的手风琴，还允许您通过添加类来禁用特定部分的关闭（例如，如果您使用它进行导航）noaccordion 到主级别的 LI 标记。最后，您可以将一个类 expandfirst 添加到主级别 LI，以在页面加载时自动打开匹配元素的手风琴。

【讨论】：

【解决方案6】：

为那些不需要 jQuery UI Accordion 样式并希望保持代码简单的人编辑了 anasnakawa 代码。 （希望你会发现它有用）

HTML：

<div id="multiOpenAccordion">
        <h3>tab 1</h3>
        <div>A lot of text</div>
        <h3>tab 2</h3>
        <div>A lot of thex 2</div>
</div>

Javascript：

$(function(){
        $('#multiOpenAccordion').multiAccordion();
});

更改代码：

(function($){
    $.fn.extend({ 
        multiAccordion: function(options) {
            var defaults = {};
            var options =  $.extend(defaults, options);
            return this.each(function() {
                var $this = $(this);
                var $h3 = $this.children('h3');
                var $div = $this.children('div');

                $h3.click(function(){
                    var $this = $(this);
                    var $div = $this.next();

                    if ($this.hasClass('closed')) {
                        $this.removeClass('closed').addClass('open');
                        $div.slideDown('fast');
                    } else {
                        $this.removeClass('open').addClass('closed');
                        $div.slideUp('fast');
                    }
                });
            });
        }
    });
})(jQuery);

编辑： 如果您使用 Malihu 自定义滚动条，那么 IE 可能会出现问题。 IE 报错提示

参数无效，第 xx 行，字符 xxx

我从 Malihu 滚动条（负责滚动超过 1000 像素故障的内容）中删除了这段代码 - 它有帮助。

$.fx.prototype.cur = function(){
    if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
      return this.elem[ this.prop ];
    }
    var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    return typeof r == 'undefined' ? 0 : r;
}

这让我很头疼

【讨论】：

【解决方案7】：

这段代码sn -p修复了边角问题（展开副vis时header底角应该消失）

$("#accordion").addClass("ui-accordion ui-widget ui-helper-reset ui-accordion-icons")
.find("h3")
        .addClass("ui-accordion-header ui-helper-reset ui-corner-bottom ui-corner-top ui-state-default")
        .hover(function() { $(this).toggleClass("ui-state-hover"); })
        .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
        .click(function() {
            $(this).toggleClass("ui-accordion-header-active").toggleClass("ui-state-active")
                .toggleClass("ui-state-default").toggleClass("ui-corner-bottom")
                .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass("ui-icon-triangle-1-s")
                .end().next().slideToggle().toggleClass("ui-accordion-content-active");
            return false;
        })
        .next().addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom").hide();

【讨论】：

【解决方案8】：

<ul class="accordion">
        <li id="one" class="files">
            <a href="#one">Admin Video</a>
            <ul class="sub-menu">
                <li><a href="<?php echo base_url();?>index.php/admin/adminvideo/addvideo"><em>01</em>Add video</a></li>
                <li><a href="<?php echo base_url();?>index.php/admin/adminvideo"><em>02</em>List Video</a></li>
                <li><a href="<?php echo base_url();?>index.php/admin/adminvideo/categorys"><em>03</em>Video Categories</a></li>                 
            </ul>
        </li>

        <li id="two" class="mail">
            <a  href="#two">Users</a>
            <ul class="sub-menu">
                <li><a href="<?php echo base_url();?>index.php/admin/admin/listsubs"><em>01</em>Subscribers List</a></li>
                <li><a href="<?php echo base_url();?>"><em>02</em>User Video Suggestion</a></li>
            </ul>
        </li>


        <li id="three" class="cloud">
            <a class="active" href="#three">Background Image options</a>
            <ul class="sub-menu">
                <li><a href="<?php echo base_url();?>index.php/admin/adminsettings"><em>01</em>Add</a></li>
                <li><a href="<?php echo base_url();?>index.php/admin/adminsettings/listbgs"><em>02</em>List</a></li>
            </ul>
        </li>
    </ul>

$(document).ready(function() {


    var accordion_head = $('.accordion > li > a'),
        accordion_body = $('.accordion li > .sub-menu');
    $.each($(".accordion > li > a"), function(){
        if($(this).attr('class') == 'active')
        {
            $(this).next().slideDown('normal');
        }           
    });



    // Open the first tab on load

    //accordion_head.first().addClass('active').next().slideDown('normal');

    // Click function

    accordion_head.on('click', function(event) {

        // Disable header links

        event.preventDefault();

        // Show and hide the tabs on click

        if ($(this).attr('class') != 'active'){
            accordion_body.slideUp('normal');
            $(this).next().stop(true,true).slideToggle('normal');
            accordion_head.removeClass('active');
            $(this).addClass('active');
        }

    });

});

希望对你有帮助

【讨论】：

【解决方案9】：

另一种可能性是使用多个手风琴实例（每个部分 1 个手风琴）。我尝试使用上面的 JohnFx 解决方案，但这会产生默认手风琴所没有的样式问题。当我将我的 2 部分单手风琴分成两个单独的手风琴时，我能够保持样式很好。此外，您不必处理手风琴的内部 css 和 html 实现。

【讨论】：