正在寻找类似于Accordion的JQuery插件，但它允许同时打开多个部分

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

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

我的问题：

在我沿着手动路线走得太远之前，有人知道类似的插件，或者与此类似的mod，允许同时打开多个面板吗

有没有一个手风琴一样的控件，允许多个打开的面板，我可以用谷歌搜索其他选项的通用名称

如果有必要的话，这里是先前从文档中引用的第一部分

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

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

---

为了寻找类似的解决方案，我修改了上周在网上找到的一些代码。这假设每个手风琴都是一个嵌套的无序列表。要使其正常工作，您必须为每个手风琴拥有唯一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>

---

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

谢谢大家的建议，但我终于自己找到了一个完全符合我要求的东西。我添加它是为了回答任何其他需要类似东西的人

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

请参阅上面链接的站点以获取完整的示例，但下面是使手风琴控件允许打开多个面板所需的代码的要点。如插件文档中所述，使用相同的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>

$（函数（）{
$（“#手风琴”）.addClass（“ui手风琴ui小部件ui帮助器重置ui手风琴图标”）
.查找（“h3”）
.addClass（“ui手风琴头ui助手重置ui状态默认ui角顶部ui角底部”）
.prepend（“”）
。单击（函数（）{
$（this）.toggleClass（“ui手风琴头活动”）.toggleClass（“ui状态活动”）
.toggleClass（“ui状态默认”）.toggleClass（“ui角底”）
.find（“>.ui图标”）.toggleClass（“ui-icon-triangle-1-e”）.toggleClass（“ui-icon-triangle-1-s”）
.end（）.next（）.toggleClass（“活动的ui手风琴内容”）.toggle（）；
返回false；
})
.next（）.addClass（“ui手风琴内容ui帮助器重置ui小部件内容ui角底面”）.hide（）；
})

大概对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();

$（“.colapse”）.addClass（“ui手风琴ui小部件ui帮助器重置ui手风琴图标”）
.查找（“h3”）
.addClass（“ui手风琴头ui助手重置ui角所有ui状态默认值”）
.prepend（“”）
。单击（函数（）{
$j（this）.toggleClass（“ui手风琴头激活”）.toggleClass（“ui角点全部”）.toggleClass（“ui角点顶部”）.toggleClass（“ui状态激活”）
.toggleClass（“ui状态默认值”）
.find（“>.ui图标”）.toggleClass（“ui-icon-triangle-1-e”）.toggleClass（“ui-icon-triangle-1-s”）
.end（）.next（）.toggle（）.toggleClass（“ui手风琴内容活动”）；
返回false；
})
.next（）.addClass（“ui手风琴内容ui帮助器重置ui小部件内容ui角底面”）.hide（）；

我制作了一个jQuery插件，它具有与jQuery UI 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>

更新： 该插件已经更新，支持默认的活动选项卡选项

编辑的anasnakawa代码，适用于那些不需要jQuery UI手风琴样式且希望代码简单的用户。（希望你会觉得有用）

HTML:

更改代码：

(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 scrollbar（它负责滚动超过1000px的内容）中删除了这段代码，这很有帮助

$.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;
}

---

这让我非常头疼

此代码片段修复了角点问题（扩展时标题下角应消失，反之亦然）

$（“#手风琴”）.addClass（“ui手风琴ui小部件ui帮助器重置ui手风琴图标”）
.查找（“h3”）
.addClass（“ui折叠式标题ui帮助器重置ui角底ui角顶ui状态默认值”）
.hover（函数（）{$(
$(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
});

<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>

$(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);

$.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;
}

$("#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();

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

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

    });

});