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

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

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

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.

该文档有以下内容，并建议采用另一种方法使用代码片段(参见下面)。这很好，而且他们提供的代码基本上是有效的，但是我发现我在插件中重新创建了很多东西，比如切换类并在XHTML中手工应用主题。

My Questions:

我的问题:

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?

   在我沿着手动路径走得太远之前，是否有人知道一个类似的插件，或者是mod到这个，允许多个面板同时打开?

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

如果重要的话，这里是我在前面的文档中引用的部分。

NOTE: If you want multiple sections open at once, don't use an accordion

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

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来编写，如下所示:

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

10 个解决方案

#1

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.

谢谢大家的建议，但我终于找到了自己想要的东西。我把它作为任何需要类似东西的人的答案。

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.

使用这里的代码和示例XHTML的解决方案可以扩展JQuery Accordion插件，使其同时打开多个面板，并在不重新创建样式的情况下保持插件提供的主题和其他功能。

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

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

#2

I have done a jQuery plugin that has the same look of jQuery UI Accordion and can keep all tabs\sections open

我已经做了一个jQuery插件，它具有与jQuery UI手风琴相同的外观，并且可以保持所有标签栏的打开

you can find it here

你可以在这里找到

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

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

works with the same markup

使用相同的标记。

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

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

UPDATE: the plugin has been updated to support default active tabs option

更新:插件已经被更新以支持默认的活动选项卡选项。

#3

Changed a few things presumably for 1.8.5.

改变了一些事情，大概是1.8.5。

Moving the toggle fixed a state change problem (click show, click no hide, click hide, click show, click hide...) Classes somewhat mismatched jquery's template and rendering suffered

移动切换修复了状态改变的问题(点击显示，点击无隐藏，点击隐藏，点击显示，点击隐藏…)类在某种程度上与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();

#4

I modified some code I had found online last week looking for a similar solution. This assumes that each accordion is a nested unordered list. To get this working you must have unique IDs for each of your accordions. Here's an example:

我修改了上周在网上找到的一些代码，寻找类似的解决方案。这假定每个手风琴导航都是一个嵌套的无序列表。要使此工作，您必须为每个手风琴具有惟一的id。这里有一个例子:

HTML

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

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

You will need your own CSS to support this but it allows for any number of accordions and also allows you to disable a particular section from being closed (if, for instance, you use this for navigation) by adding the class noaccordion to a main level LI tag. Lastly, you may add a class expandfirst to a main level LI to auto open the accordion for the matching element(s) on page load.

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

#5

Edited anasnakawa code for those who don't need jQuery UI Accordion styling and wants to keep the code simple. (hope you'll find it useful)

为那些不需要jQuery UI手风琴样式并希望保持代码简单的人编辑了anasnakawa代码。(希望你会觉得它有用)

HTML:

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:

Javascript:

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

Changed code:

修改代码:

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

Edit: If you use Malihu custom scrollbar then there may be problems with IE. IE drops error saying

编辑:如果您使用的是Malihu自定义滚动条，那么IE可能存在问题。即错误滴说

Invalid argument, Line xx, character xxx

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

I removed this code from Malihu scrollbar (which is responsible about scrolling content which is more than 1000px glitch) - It helped.

我从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;
}

This gave me real headache

这真让我头疼

#6

This code snippet fixes the corner problem (the header bottom corner should disappear when expanding and vice visa)

这段代码片段修复了角的问题(扩展和副visa时头的底部角应该消失)

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

#7

The best solution is to use 1 accordion per section, as Matthew Brown also said.

最好的解决方案是每节使用一个手风琴，正如马修·布朗(Matthew Brown)所说。

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

#8

Another solution is the maccordion plugin - https://github.com/Dattaya/Maccordion

另一个解决方案是maccordion插件——https://github.com/Dattaya/Maccordion

Example - http://jsfiddle.net/Dattaya/pTXju/

例子——http://jsfiddle.net/Dattaya/pTXju/

It supports options: disabled, active, heightStyle, event, header, icons; effect related options: effect, options, easing, speed.

它支持选项:禁用、活动、高度样式、事件、标题、图标;与效果相关的选项:效果，选项，放松，速度。

Methods: destroy, disable, enable, option, widget, refresh.

方法:销毁、禁用、启用、选项、小部件、刷新。

Events: create, beforeActivate, activate.

事件:创建、beforeActivate激活。

And also you have the ability to add/remove tab dynamically. Documentation - https://github.com/Dattaya/Maccordion/blob/master/README.md

此外，您还可以动态添加/删除选项卡。文档——https://github.com/Dattaya/Maccordion/blob/master/README.md

#9

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

    });

});

hopes it helps you

希望它能帮助你

#10

Another possibility would be to use multiple accordion instances (1 accordion per section). I tried using JohnFx's solution above but that created styling issues that I did not have with the default accordion. When I split my 2 section single accordion into two separate accordions I was able to keep the styling just fine. In addition, you don't have to deal with the inner css and html implementation of the accordion.

另一种可能是使用多个手风琴实例(每个节一个手风琴实例)。我尝试使用上面的JohnFx解决方案，但是这产生了我没有使用默认手风琴的样式问题。当我把我的2个单件手风琴分成两个独立的手风琴时，我就能保持很好的风格。此外，您不必处理手风琴导航的内部css和html实现。