jQueryUI 手风琴 - 每页可以有多个吗？答案

【问题标题】：jQueryUI accordion - can I have more than one per page?jQueryUI 手风琴 - 每页可以有多个吗？
【发布时间】：2011-07-20 21:01:01
【问题描述】：

我对 jQuery 很陌生，但我发现了手风琴小部件，并且大部分时间都可以使用它。我的问题是，一个页面上是否可以有多个手风琴？我有几个需要在视觉上分开的列表，每个列表都需要是自己独立的手风琴。

到目前为止，这是我的代码：

<script type="text/javascript"> 
    $(function(){

        // Accordion
        $("#accordion").accordion({
            collapsible: true,
            header: "h3"
        });

    });
</script> 
<style> 
.demoHeaders { margin-top: 2em; }
</style> 

<!-- Accordion --> 
<h2 class="demoHeaders">Accordion</h2> 
<div id="accordion"> 
    <div> 
    <h3><a href="#">First</a></h3> 
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
    </div> 
    <div> 
    <h3><a href="#">Second</a></h3> 
        <div>Phasellus mattis tincidunt nibh.</div> 
    </div> 
    <div> 
    <h3><a href="#">Third</a></h3> 
        <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
</div>

我需要的是具有不同内容的整个 Accordion div 的副本。我该怎么做？

（另外 - 我如何设置这个，所以默认视图是让所有 div 折叠？collapsible 属性允许折叠所有 div，而不是始终打开一个的默认手风琴功能，但它仍然最初显示一个 div 打开；然后您必须单击该 div 的标题以将其关闭。）

【问题讨论】：

标签： jquery-ui

【解决方案1】：

是的，可以只重复您的 Accordion 标记，而不是使用 ID 使用类。

<div class="accordion"> 
    <div> 
    <h3><a href="#">First</a></h3> 
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
    </div> 
    <div> 
    <h3><a href="#">Second</a></h3> 
        <div>Phasellus mattis tincidunt nibh.</div> 
    </div> 
    <div> 
    <h3><a href="#">Third</a></h3> 
        <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
</div>

接下来更改您的 jquery 选择器以使用类而不是 id。

$(".accordion").accordion({ 可折叠：真实，标题：“h3” });

【讨论】：

谢谢 - 这是我最难处理的选择器问题。至于问题的第二部分，有没有办法让所有的div默认折叠？
没关系 - active:false 之前 collapsible:true 做到了。

【解决方案2】：

您可以在 Java 脚本和 HTML 类中使用随机数

【讨论】：

随机变量名、类名或 id 绝不是一个好主意。 2 年后，您可能会再次查看您的代码，或者其他人可能会再次查看您的代码，但他们不会知道您在说什么。数字是描述性最少的名称，除非与单词结合使用，否则它可能会变得太长而无法理解。