同时打开所有手风琴窗

我正在为我的应用程序使用jQuery accordion插件。 有没有办法同时打开部分（页面加载后），以便同时显示所有页面的内容。 如果不可能，请给我一个链接，我可以实现类似的function。 谢谢。 我是jQuery的新手。

Answer 1

jQuery使得在没有插件的情况下制作自己的手风琴非常容易。 例如，这个HTML：

 Section One 
 
 ..... content here ......  

这个jQuery：

 $('.accordion_toggler').click(function() { $(this).next('.accordion_content').slideToggle(); }); 

每次单击accordion_toggler ，以下accordion_content都会切换（在这种情况下向上或向下滑动）。 要从隐藏的所有内容开始，但允许多个同时打开，请使用此CSS：

 .accordion_content { display: none } 

Answer 2

您应该阅读此页面中的 NOTES。 在这里，我直接从该页面复制并粘贴它：

注意：如果您想一次打开多个部分，请不要使用手风琴

手风琴不允许同时打开多个内容面板，这需要花费很多精力。 如果您正在寻找允许打开多个内容面板的小部件，请不要使用它。 通常它可以用几行jQuery编写，如下所示：

 jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle(); return false; }).next().hide(); }); 

或动画：

 jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); }); 

Answer 3

主题解决方案！

_没有插件这真的很简单。 使用与普通手风琴相同的标记。 将类从普通手风琴复制到您的标记。 添加“小”JavaScript魔法和中提琴！

jsFiddle示例（带主题切换器！）

---

HTML

 
 
 
 
  Section 1 
 
 
 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
 
 
  Section 2 
 
 
 Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. 
 
 
  Section 3 
 
 
 Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
 
 
List item one
 
List item two
 
List item three
 
 
 
  Section 4 
 
 
 Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. 
 
 Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
 
 
  

---

JavaScript

 $(function() { $("#accordion > h3").on("click", function(e) { $(this).next().slideToggle(function(e) { if ($(this).is(":visible")) { $(this).addClass("ui-accordion-content-active") .prev().toggleClass("ui-corner-all ui-corner-top").addClass("ui-accordion-header-active ui-state-active") .children(".ui-accordion-header-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s"); } else { $(this).removeClass("ui-accordion-content-active") .prev().toggleClass("ui-corner-all ui-corner-top").removeClass("ui-accordion-header-active ui-state-active") .children(".ui-accordion-header-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s"); } }); }) .hover(function(e) { $(this).toggleClass("ui-state-hover"); }); }) 

---

当然，如果你仍然想要一个jQueryUI主题兼容（ _{或者他们声称，个人未经测试} ）插件添加到你的Libs，你可以在这里找到一个！