寻找类似于Accordion的JQuery插件，但是允许一次打开多个部分 [英] Looking for a JQuery plug-in similar to Accordion, but that allows multiple sections open at once

问题描述

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

I am looking to have a UI element similar to that offered by the JQUERY Accordion plug-in, but allowing the user to keep multiple sections open at once.

该文档具有以下内容，并提出了一种带有代码段的替代方法(请参见下文).一切都很好，它们提供的代码基本上可以用，但是我发现自己重新创建了许多内置于插件中的东西，例如关闭类并在XHTML中手动应用主题.

The documentation has the following to say, and suggests an alternate approach with a code snippet (see below). That is great and all, and the code they provide basically works, but I find myself recreating a lot of things built into the plugin like switching out the classes and applying the themes manually in the XHTML.

我的问题:

1. 在我沿手动路线走得太远之前，是否有人知道类似的插件或对该插件进行修改以允许一次打开多个面板?

1. Before I get too far along the manual route, does anyone know of a similar plug-in, or mod to this one to allow multiple panels to be open at once?

类似手风琴的控件是否还有另一个通用名称，它允许我使用多个打开的面板供Google使用其他选项?

Is there a another common name for an accordion-like control that allows multiple open panels that I could use to Google for other options?

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

Here is the part I referenced earlier from the documentation, if it matters.

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

手风琴不允许同时打开一个以上的内容面板，为此需要花费很多精力.如果您正在寻找一个可打开多个内容面板的小部件，请不要使用它.通常，它可以用几行jQuery代替，就像这样:

An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:

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

推荐答案

感谢每个人的建议，但是我终于找到了自己的东西，这些东西完全符合我的期望.我将其添加为其他需要类似内容的人的答案.

Thanks for everyone's suggestions, but I finally found something on my own that does exactly what I was looking for. I'm adding it as an answer for anyone else who needs something similar.

解决方案
使用代码和示例XHTML 此处，您可以扩展

The Solution
Using the code and sample XHTML here you can extend the JQuery Accordion plug-in to have multiple panels open at once and keep the theming and other functionality provided by the plug-in without recreating the styles.

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

See the site linked above for a complete example, but here is the meat of the code needed to make the accordion control allow multiple panels to be open. Use the same HTML to define the headers and content as described in the plug-in documentation

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

这篇关于寻找类似于Accordion的JQuery插件，但是允许一次打开多个部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！