寻找类似手风琴的 JQuery 插件,但允许多个部分同时展开。

23

我想要一个类似于JQUERY手风琴插件的UI元素,但允许用户同时保持多个部分打开。

文档中提供了以下内容,并建议使用代码片段的备用方法(见下文)。 这很好,他们提供的代码基本上有效,但我发现自己需要重新创建插件中构建的许多东西,例如手动切换类和应用主题。

我的问题:

  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();
});
9个回答

19

感谢大家的建议,但最终我在自己的探索中找到了完全符合我要求的东西。我将其添加为答案,供其他需要类似功能的人参考。

解决方案
使用这里的代码和示例XHTML(点击此处),您可以扩展JQuery折叠插件以同时打开多个面板,并保留由插件提供的主题和其他功能,而不必重新创建样式。

请参见上面链接的网站获取完整示例,但下面是使折叠控件允许多个面板打开所需的代码核心部分。使用与插件文档中描述的相同的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>

1
嗨@JohnFx,我需要相同的功能,但在回传时,我想保持部分的打开/关闭状态。谢谢任何帮助。 - Kashif

14
我创建了一个 jQuery 插件,它的外观与 jQuery UI 手风琴相同,并且可以保持所有选项卡/部分打开。你可以在这里找到它: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
});

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


你不需要插件来实现这个... https://dev59.com/lnA75IYBdhLWcg3wGU6I#10237915 - AaronJ

3
最好的解决方案是每个部分使用1个手风琴,正如Matthew Brown所说。
$( "#accordion1" ).accordion({ collapsible: true });
$( "#accordion2" ).accordion({ collapsible: true });
$( "#accordion3" ).accordion({ collapsible: true });

2

据推测,为了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();

1
这段代码片段解决了角落问题(当展开时,标题底部角应该消失,反之亦然)。
$("#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();

1

编辑了anasnakawa的代码,适用于那些不需要jQuery UI手风琴样式并希望保持代码简单的用户。(希望您会发现它有用)

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

这让我真头疼


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

    });

});

希望能对您有所帮助


1

上周我修改了一些在网上找到的代码,寻找类似的解决方案。这假定每个手风琴都是一个嵌套的无序列表。为了使其正常工作,您必须为每个手风琴设置唯一的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 添加到主级别LI中,以在页面加载时自动打开匹配元素的手风琴。


0
另一种可能性是使用多个手风琴实例(每个部分一个手风琴)。我尝试使用以上JohnFx的解决方案,但它会产生样式问题,而默认手风琴则没有这个问题。当我将我的两个部分单手风琴分成两个独立的手风琴时,我能够很好地保持样式。此外,您无需处理手风琴的内部CSS和HTML实现。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接