jquery - 切换独立 div 不起作用

Question

我有一个切换 jquery 片段，在我看来它应该可以工作，但事实并非如此。它只允许第一个 div 切换。如果我删除第一个 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>

查询

$('.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 中必须是唯一的，这就是为什么您只让它与第一个元素一起工作。