切换独立 div 不起作用

Question

我有一个切换 jquery 片段，在我看来它应该可以工作，但事实并非如此。它只允许第一个 div 切换。如果我删除第一个 div 集，第二个开始工作，所以我知道这不是错字或任何东西。

这里是 JsFiddle http://jsfiddle.net/kits87/69qnosyb/1/

HTML

<div>
        <div id="ByteHeaderContainer">
            <div class="ByteHeadTitle"><p>Header</p></div>
        </div>

        <div id="Byte">Copy</div>
</div>       

    <br><br><br>

<div>
        <div id="ByteHeaderContainer">
            <div class="ByteHeadTitle"><p>Header</p></div>
        </div>

        <div id="Byte">Copy</div>
</div>

Jquery

$('.ByteHeadTitle').hide();

$('#ByteHeaderContainer').click(function() {        
    $(this).next('#Byte').fadeToggle('fast');
    $(this).children('.ByteHeadTitle').fadeToggle('fast');   
});

我错过了什么？

Answer 1

改变

<div id="ByteHeaderContainer">

到

<div class="ByteHeaderContainer">

和

$('#ByteHeaderContainer').click(function() {

到

$('.ByteHeaderContainer').click(function() {

请记住，您的 ID 在 DOM 中必须是唯一的，这就是为什么您只让它与第一个元素一起使用。

Answer 2

工作fiddle： http://jsfiddle.net/66p2dj1q/

将 HTML 中的 #ByteHeaderContainer 更改为 .ByteHeaderContainer（更改为 class）、CSS 和 jQuery。

Answer 3

每个元素的id需要唯一。

您可以改用类，但是针对您的情况的变通方法是将您的代码替换为：

$('[id="ByteHeaderContainer"]').click(function () {
    $(this).next('#Byte').fadeToggle('fast');
    $(this).children('.ByteHeadTitle').fadeToggle('fast');
});

Here is the updated JSFiddle

Answer 4

ID 必须是唯一的。尝试在 HTML 和 JS 中将 #ByteHeaderContainer 更改为 .byteHeaderContainer，它会起作用。

切换独立 div 不起作用

Toggling independent divs not working

html

css

jquery

toggle