Question

我在TYMPANUS为我的网站使用了一个很好的手风琴脚本，不同之处在于我在1页上多次使用它，如：

<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个独立的元素（我需要它分开），但由于ID是相同的，你可以清楚地看到第二个手风琴不是＆＃39;工作。

这个小提琴的Javascript：

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

为了让它正常运行，我为每个元素创建了单独的ID，如FIDDLE 02

这个小提琴的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

id属性指定其元素的唯一标识符（ID）。该 value必须在元素的home子树中的所有ID中唯一并且必须至少包含一个字符。该值不得包含任何空格字符。

所以要解决你的问题，只需删除相同的ID，然后离开课程手风琴

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

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

获取javascript手风琴使用1 ID

1 个答案: