寻找类似于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 here，您可以扩展JQuery Accordion plug-in以同时打开多个面板，并保留插件提供的主题和其他功能，而无需重新创建样式。

请参阅上面链接的网站以获取完整示例，但这里是使手风琴控制所需的代码的内容允许打开多个面板。使用相同的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相同的外观，可以保持所有标签\部分打开

你可以在这里找到它

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

更新： 该插件已更新为支持默认活动标签选项

Answer 3

最好的解决方案是每部分使用1个手风琴，正如Matthew Brown所说。

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

Answer 4

改变了一些大概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();

Answer 5

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

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

您将需要自己的CSS来支持此功能，但它允许任意数量的手风琴，并且还允许您通过添加类 noaccordion 到主级LI标签。最后，您可以将类 expandfirst 添加到主级别L1，以便在页面加载时自动打开匹配元素的折叠。

Answer 6

为那些不需要jQuery UI Accordion样式的编辑 anasnakawa 代码，并希望保持代码简单。 （希望你发现它很有用）

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：

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

修改 的 如果您使用Malihu自定义滚动条，那么IE可能会出现问题。 IE删除错误说

  

无效参数，行xx，字符xxx

我从Malihu滚动条中删除了这段代码（它负责滚动超过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;
}

这让我很头疼

Answer 7

此代码段解决了角落问题（扩展和副签证时标题底角应该消失）

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

Answer 8

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

    });

});

希望它可以帮助你

Answer 9

另一种可能性是使用多个手风琴实例（每节一个手风琴）。我尝试使用上面的JohnFx解决方案，但这创造了我没有使用默认手风琴的样式问题。当我将我的2节单手风琴分成两个独立的手风琴时，我能够保持造型很好。此外，您不必处理手风琴的内部css和html实现。