切换独立潜水不工作

Question

我有一个切换jquery片段，它似乎对我来说应该工作，但它不是。它只允许第一个div切换。如果我删除第一个div集，第二个div集开始工作，所以我知道这不是打字错误或其他什么。

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

change

<div id="ByteHeaderContainer">

<div class="ByteHeaderContainer">

和

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

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

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

Answer 2

工作小提琴:http://jsfiddle.net/66p2dj1q/

更改#ByteHeaderContainer为.ByteHeaderContainer在你的HTML(更改为类)，CSS和jQuery。

Answer 3

每个元素的id必须是唯一的

您可以使用类来代替，但是，针对您的情况的一种解决方法是将您的代码替换为:

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

这是更新后的JSFiddle

Answer 4

id必须唯一。尝试在HTML和JS中将#ByteHeaderContainer更改为.byteHeaderContainer，它将工作。