javascript - 获取 javascript Accordion 以使用 1 个 ID

Question

我正在使用来自 TYMPANUS 的 Accordion 脚本对于我的网站，不同之处在于我在一页上多次使用它，例如:

<div id="st-accordion" class="st-accordion">
    <ul>
        <li>
            <a href="#">Flowers <span class="st-arrow">View <b>Details</b></span></a>
            <div class="st-content">

            <p>She packed her seven versalia, put her initial into the belt and made  
herself on the way. When she reached the first hills of the Italic Mountains, she had 
a last view back on the skyline of her hometown Bookmarksgrove, the headline of 
Alphabet Village and the subline of her own road, the Line Lane.</p>

            </div>
        </li>
    </ul>
</div>



<div id="st-accordion" class="st-accordion">
    <ul>
        <li>
            <a href="#">Flowers <span class="st-arrow">View <b>Details</b></span></a>
            <div class="st-content">

            <p>She packed her seven versalia, put her initial into the belt and made 
herself on the way. When she reached the first hills of the Italic Mountains, she had 
a last view back on the skyline of her hometown Bookmarksgrove, the headline of 
Alphabet Village and the subline of her own road, the Line Lane.</p>

            </div>
        </li>
    </ul>
</div>

请看这个FIDDLE 01

如您所见，我有 2 个单独的元素(我需要将其分开)使用 Accordion ，但是因为 ID 相同，您可以清楚地看到第二个 Accordion 不起作用.

这个 fiddle 的 Javascript:

$(function() {
$('#st-accordion').accordion();
});

所以为了让它工作，我为每个元素创建了单独的 ID，就像这个 FIDDLE 02

这个 fiddle 的 Javascript:

$(function() {
$('#st-accordion-01, #st-accordion-02').accordion(); 
});

但是我不喜欢总是创建一个额外的/不同的 ID，所以有没有办法让 FIDDLE 01 工作而不必求助于 FIDDLE 02？ ... 或者这是不可能的？

*上面发布的 Javascripts 位于 jsfiddle 中 javascript 部分的最底部

Answer 1

在一个页面中不能/不能有具有相同id名称的元素。

http://www.w3.org/TR/html5/elements.html#the-id-attribute

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

因此，要解决您的问题，只需删除相同的 ID 并离开类 st-accordion

http://jsfiddle.net/5h559dyj/3/

$(function() {
    $('.st-accordion').accordion();
});