Question

我需要控制隐藏/显示某些跨度。我在这里找到了一些例子，基本代码也可以。这是我的jsfiddle。有两个主题，当单击更多单词时，会显示子主题。问题在于显示了所有子主题，而不仅仅是单击主题下的主题。

我知道问题是两个div部分使用相同的类名，如果我更改其中一个的类名并复制jquery，它将按我的意愿工作。但是这个代码是在php中使用循环函数创建的，并且没有一定数量的可能主题。我想我可以更改php代码来创建唯一的类名，但我不知道如何添加jquery代码，因此它将检查任意数量的可能性。如何编码？

    <script>
    $("#kid-1").hide();
    $("#kid-2").hide();
    $("#kid-3").hide();

    $(".more-kids").click(function() {
     $("#kid-1").toggle();
     $("#kid-2").toggle();
     $("#kid-3").toggle();
    });
    </script>

    <div class="information">
      <span><a href="http://example.com/-i-10.html">Terms</a></span>
      <span class="more-kids">more</span><br />
      <span id="kid-1"><a href="http://example.com/14.html">First Child</a></span><br />
      <span id="kid-2"><a href="http://example.com/15.html">Second Chlld</a></span><br />   
    </div>

    <div class="information">
      <span><a href="http://example.com/-i-10.html">Conditions</a></span>
      <span class="more-kids">more</span><br /><br />
      <span id="kid-3"><a href="http://example.com/14.html">Third Child</a></span><br />
    </div>

Answer 1

如果您要将id设为数字，则表示您应该使用class代替。您可以改为将id更改为class "kid"。然后使用$(this).nextAll(".kid").toggle()：

切换项目

$(".kid").hide();

$(".more-kids").click(function() {
  $(this).nextAll(".kid").toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="information">
  <span><a href="http://example.com/-i-10.html">Terms</a></span>
  <span class="more-kids">more</span><br />
  <span class="kid"><a href="http://example.com/14.html">First Child</a></span><br />
  <span class="kid"><a href="http://example.com/15.html">Second Chlld</a></span><br />   
</div>

<div class="information">
  <span><a href="http://example.com/-i-10.html">Conditions</a></span>
  <span class="more-kids">more</span><br /><br />
  <span class="kid"><a href="http://example.com/14.html">Third Child</a></span><br />
</div>

切换多个跨度

1 个答案: