jQueryUI手风琴-每页可以有多个吗? [英] jQueryUI accordion - can I have more than one per page?

问题描述

我对jQuery非常陌生，但是找到了手风琴小部件并在大多数情况下都可以使用它.我的问题是，一页上可以有多个手风琴吗?我有几个列表需要在视觉上分开，每个列表都必须是自己的独立手风琴.

I'm very new to jQuery, but have found the accordion widget and have it working for the most part. My question is, is it possible to have more than one accordion on a page? I have several lists that need to be visually separate, and each needs to be its own self-contained accordion.

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

Here's my code so far:

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

我需要的是复制具有不同内容的整个手风琴div.我该怎么办?

What I need is to have a duplicate of the entire Accordion div with different content. How can I do this?

(另外-我如何设置此值，以便默认视图是使所有div折叠?collapsesible属性允许将所有div折叠，而不是始终打开一个默认的手风琴功能，但仍然最初显示时打开一个div；然后必须单击该div的标题将其关闭.)

(Also - how can I set this so the default view is to have all the divs collapsed? The collapsible property allows all of the divs to be collapsed, instead of the default accordion functionality of always having one open, but it still initially displays with one div open; you then have to click that div's header to close it.)

推荐答案

是的，可以重复您的手风琴标记，而不是使用ID来使用类.

Yes it's possible just repeat your Accordion markup, but rather than using an ID use a class.

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

Next change your jquery selector to use a class rather than an id.

$(.accordion").accordion({ 可折叠:正确， 标头:"h3" });

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

这篇关于jQueryUI手风琴-每页可以有多个吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！