Question

我是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都折叠？可折叠属性允许折叠所有div，而不是默认的手风琴功能，总是有一个打开，但它仍然最初显示一个div打开;然后你必须单击该div的标题来关闭它。）

Answer 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。

$（ “手风琴”）。手风琴（{ 可折叠的：是的，标题：“h3” }）;

Answer 2

您可以在Javascript和HTML类中使用随机数作为类

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

2 个答案: