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

Question

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

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

我的问题:

1. 在我沿着手动路线走得太远之前,有没有人知道一个类似的插件,或者这个插件允许多个面板一次打开？

2. 对于类似手风琴的控件是否有另一个通用名称,允许多个打开的面板,我可以使用谷歌的其他选项？

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

注意:如果您想一次打开多个部分,请不要使用手风琴

手风琴不允许同时打开多个内容面板,这需要花费很多精力.如果您正在寻找允许打开多个内容面板的小部件,请不要使用它.通常它可以用几行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();
});

Answer 1

感谢大家的建议,但我终于找到了自己的东西,完全符合我的要求.我正在为其他需要类似东西的人添加它作为答案.

解决方案
在此处使用代码和示例XHTML ,您可以扩展JQuery Accordion插件,以便同时打开多个面板,并保留插件提供的主题和其他功能,而无需重新创建样式.

请参阅上面链接的站点以获取完整示例,但这里是使手风琴控制所需的代码的内容允许打开多个面板.使用相同的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>

Answer 2

我做了一个jQuery插件,它具有与jQuery UI Accordion相同的外观,可以保持所有tabs\sections打开

你可以在这里找到它

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

更新:插件已更新为支持默认活动选项卡选项