寻找类似于Accordian的JQuery插件，但允许一次打开多个部分
我希望有一个类似于JQUERY Accordian插件提供的UI元素，但允许用户一次打开多个部分。
该文档有以下内容，并建议使用代码片段的替代方法（见下文）。 这很好，而且它们提供的代码基本上都可以工作，但我发现自己重新构建了插件中内置的很多内容，比如切换类并在XHTML中手动应用主题。
我的问题：
-
在我沿着手动路线走得太远之前，有没有人知道一个类似的插件，或者这个插件允许多个面板一次打开？
-
还有一个类似手风琴的控件的另一个通用名称，允许多个打开的面板，我可以使用谷歌的其他选项吗？
如果重要的话，这是我之前从文档中引用的部分。
注意：如果您想一次打开多个部分，请不要使用手风琴
手风琴不允许同时打开多个内容面板，这需要花费很多精力。 如果您正在寻找允许打开多个内容面板的小部件，请不要使用它。 通常它可以用几行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(); }); 感谢大家的建议，但我终于找到了自己的东西，完全符合我的要求。 我正在为其他需要类似东西的人添加它作为答案。
解决方案
在这里使用代码和示例XHTML ，您可以扩展JQuery Accordion插件，以便同时打开多个面板，并保留插件提供的主题和其他function，而无需重新创建样式。
请参阅上面链接的站点以获取完整示例，但这里是使手风琴控制所需的代码的内容允许打开多个面板。 使用相同的HTML来定义插件文档中描述的标头和内容
我做了一个jQuery插件，它具有与jQuery UI Accordion相同的外观，可以保持所有tabs \ sections打开
你可以在这里找到它
http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/
使用相同的标记
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 });
更新：插件已更新为支持默认活动选项卡选项
最好的解决方案是每个部分使用1个手风琴，正如Matthew Brown所说。
$( "#accordion1" ).accordion({ collapsible: true }); $( "#accordion2" ).accordion({ collapsible: true }); $( "#accordion3" ).accordion({ collapsible: true });
改变了一些大概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('') .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();
我修改了上周在网上找到的一些代码，寻找类似的解决方案。 这假设每个手风琴都是嵌套的无序列表。 要使其正常工作，您必须拥有每个手风琴的唯一ID 。 这是一个例子：
HTML
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添加到主级别来禁用特定部分被关闭（例如，如果您将其用于导航）李标签。 最后，您可以将类expandfirst添加到主级别L1，以在页面加载时自动打开匹配元素的折叠。
为那些不需要jQuery UI Accordion样式并希望保持代码简单的人编辑anasnakawa代码。 （希望你会发现它很有用）
HTML：
tab 1
A lot of text tab 2
A lot of thex 2
使用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; }
这给了我真正的头痛
此代码段修复了角落问题（扩展和副签证时标题底角应该消失）
$("#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('') .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();
另一个解决方案是maccordion插件 – https://github.com/Dattaya/Maccordion
示例 – http://jsfiddle.net/Dattaya/pTXju/
它支持选项： disabled，active，heightStyle，event，header，icons ; 效果相关选项： 效果，选项，缓和，速度。
方法： 销毁，禁用，启用，选项，小部件，刷新 。
事件： 创建，beforeActivate，激活 。
此外，您还可以动态添加/删除选项卡。 文档 – https://github.com/Dattaya/Maccordion/blob/master/README.md
$(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'); } }); });
希望它能帮助你
另一种可能性是使用多个手风琴实例（每节一个手风琴）。 我尝试使用上面的JohnFx解决方案，但这创造了我没有使用默认手风琴的样式问题。 当我将我的2节单手风琴分成两个独立的手风琴时，我能够保持造型很好。 此外，您不必处理手风琴的内部css和html实现。