寻找类似于 Accordion 的 JQuery 插件，但它允许一次打开多个部分

Question

提问by JohnFx

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.

我希望有一个类似于 JQUERY Accordion 插件提供的 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:

我的问题：

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

在我沿着手动路线走得太远之前，有没有人知道类似的插件，或者这个插件的 mod 以允许一次打开多个面板？
类似手风琴的控件是否有另一个通用名称，它允许我可以将多个打开的面板用于 Google 的其他选项？

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

Answer 1

采纳答案by JohnFx

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 hereyou can extend the JQuery Accordion plug-into 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>

Answer 2

回答by Anas Nakawa

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 Accordion 相同的外观，并且可以保持所有选项卡\部分打开

you can find it here

你可以在这里找到它

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

更新：插件已更新以支持默认的活动选项卡选项

Answer 3

回答by Asad Usman Khan

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

最好的解决方案是每节使用 1 个手风琴，正如 Matthew Brown 也说过的。

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

Answer 4

回答by Marty Trenouth

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

Answer 5

回答by Corey Ballou

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 IDsfor each of your accordions. Here's an example:

我修改了上周在网上找到的一些代码，以寻找类似的解决方案。这假设每个手风琴都是一个嵌套的无序列表。要使其正常工作，您的每台手风琴都必须具有唯一的 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;
    });
}

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 noaccordionto a main level LI tag. Lastly, you may add a class expandfirstto a main level LI to auto open the accordion for the matching element(s) on page load.

您将需要自己的 CSS 来支持这一点，但它允许使用任意数量的手风琴，并且还允许您通过将类noaccordion添加到主级别来禁用特定部分的关闭（例如，如果您将其用于导航）LI 标签。最后，您可以将一个类expandfirst添加到主级别 LI 以在页面加载时自动打开匹配元素的手风琴。

Answer 6

回答by karlisup

Edited anasnakawacode for those who don't need jQuery UI Accordion stylingand 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 可能会出现问题。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 滚动条（负责滚动超过 1000 像素故障的内容）中删除了此代码 - 它有帮助。

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

这让我很头疼

Answer 7

回答by Mickey Shine

This code snippet fixes the corner problem (the header bottom corner should disappear when expanding and vice 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();

Answer 8

回答by shamim s

<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

希望对你有帮助

Answer 9

回答by skeletank

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 实现。

寻找类似于 Accordion 的 JQuery 插件，但它允许一次打开多个部分

提问by JohnFx

采纳答案by JohnFx

回答by Anas Nakawa

回答by Asad Usman Khan

回答by Marty Trenouth

回答by Corey Ballou

回答by karlisup

回答by Mickey Shine

回答by shamim s

回答by skeletank

相关推荐

最近更新

标签

寻找类似于 Accordion 的 JQuery 插件，但它允许一次打开多个部分

提问by JohnFx

采纳答案by JohnFx

回答by Anas Nakawa

回答by Asad Usman Khan

回答by Marty Trenouth

回答by Corey Ballou

回答by karlisup

回答by Mickey Shine

回答by shamim s

回答by skeletank

相关推荐

jQuery 如何在具有绝对位置的滚动窗口中居中模式对话框？

动态 Jquery 拆分器插件

jQuery div onclick 单击 div 内的 href

如何使用 Jquery 删除附加元素以及为什么 bind 或 live 导致元素重复

相关推荐

最近更新

标签