Question

这里我有一个小提琴链接！问题是只有第一个顶级div工作..

[http://jsfiddle.net/5Ux8L/4/] [1]

HTML -

 <div id="top">top </div>
    <div id="box">box </div>
 <div id="top">top </div>
    <div id="box">box </div>

的jQuery -

$(document).ready(function(){
  $("#top").click(function (){
        $("#box").toggle();
    });
});

Answer 1

使用普通类而不是ID，你不应该有重复的ID 。

$(document).ready(function(){
  $(".top").click(function (){
        $(this).next().toggle();
    });
});

Answer 2

您不能拥有相同ID的元素。将top从id更改为class。

<强> HTML

 <div class="top">top </div>
 <div class="box">box </div>
 <div class="top">top </div>
 <div class="box">box </div>

<强>的Javascript

$(document).ready(function(){
  $(".top").click(function (){
        $(this).next(".box").toggle();
    });
});

JS小提琴： http://jsfiddle.net/5T3K2/

Answer 3

元素的ID必须是唯一的，因此请使用class

<div class="top">top</div>
<div class="box">box</div>
<div class="top">top</div>
<div class="box">box</div>

然后

jQuery(function ($) {
    $(".top").click(function () {
        $(this).next().toggle();
    });
});

演示：Fiddle

Answer 4

$(document).ready(function(){
$(".top").click(function (){
    $(this).next(".box").toggle();
});
});

http://jsfiddle.net/5Ux8L/5/

Answer 5

不要为多个div使用id名称。总是使用课堂。顺便说一句，这是你的工作代码。

 <div class="top">top </div>
    <div class="box">box </div>
 <div class="top">top </div>
    <div class="box">box </div>

<强>的jQuery

$(document).ready(function(){
  $(".top").click(function (){
        $(this).next().toggle();
    });
});

Demo

Answer 6

使用class而不是Id。 Id是独特的财产。 fiddle

 <div class="top">top </div>
    <div class="box">box </div>
 <div class="top">top </div>
    <div class="box">box </div>

$(document).ready(function(){
  $(".top").click(function (){
        $(".box").toggle();
    });
});

为什么切换不能与其他DIV一起使用？

6 个答案: