正在寻找类似于 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. 在我沿着手动路线走得太远之前，有没有人知道类似的插件，或者这个插件的mod，可以同时打开多个面板?

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 here 您可以扩展 JQuery Accordion 插件 一次打开多个面板并保持插件提供的主题和其他功能，而无需重新创建样式.

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