Question

因此，当我运行以下代码时，我点击一个div，然后另一个div滑出。

<div class="section" id="1">Hi</div>
<div class="under" id="1">Hola</div>
<div class="section" id="2">Foo bar</div>
<div class="under" id="2">Derp</div>
</td></table>
</td></table>

<script>
$(".section").click(function(){
var id = this.id;
    $(".under").slideToggle("slow");
  });

但是，当我点击带有“section”类的div时，它会显示所有具有“under”类的div。我想要做的是显示div“under”，其id等于所选div的id（即当点击id =“1”的“section”时显示“under”，id =“1”）。我该怎么做？

Answer 1

使用

.next('div');

所以整个代码都是

<style> 
   .under{ 
      display:none; 
 padding:5px; 
     background-color:gray; 
    } 
</style> 
<div class="section" id="1">Hi</div> 
<div class="under" id="1">Hola</div> 
<div class="section" id="2">Foo bar</div> 
<div class="under" id="2">Derp</div> 
<script> 
$(".section").click(function(){ 

    $(this).next('div').slideToggle("slow"); 
  }); 
</script>

working demo

Answer 2

你可以使用.next，或者根据你设置的方式，.nextAll。以下是我对类似问题所做的简短演示：

http://jsfiddle.net/andresilich/AeGSQ/

Answer 3

好的，你的HTML有些问题;我将逐一介绍它们。

没有开放<table>或<td>标记。这将导致HTML无效。
应该有一个<tr>标记，其中包含td标记。目前在结构上是不正确的。
我在想你正在使用表格进行布局;表格应仅用于数据显示，而不用于页面布局。
您有多个ID相同。 id的想法是它只标识一个元素和一个元素。类用于为多个元素设置相同的样式。

我已在http://jsfiddle.net/FS3rt/重写了您的代码。它还会收缩任何可见的部分，以便仅向用户显示他们希望看到的信息。

显示与某个ID有关的div？

3 个答案: