Javascript 切换多个跨度

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

我知道问题在于两个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>

$（“#kid-1”）.hide（）；
$（“#kid-2”）.hide（）；
$（“#kid-3”）.hide（）；
$（“.more kids”）。单击（函数（）{
$（“#kid-1”）.toggle（）；
$（“#kid-2”）.toggle（）；
$（“#kid-3”）.toggle（）；
});
更多





更多信息

如果您制作的

id

是数字，则表明您可能应该使用

类

。您可以改为将您的

id

更改为

class

成为

“孩子”

。然后使用

$（this）.nextAll（“.kid”）.toggle（）切换项目。

：

$（“.kid”）.hide（）；
$（“.more kids”）。单击（函数（）{
$（this.nextAll（“.kid”）.toggle（）；
});

更多





更多信息




如果您制作的
id
是数字，则表明您可能应该使用
类
。您可以改为将您的
id
更改为
class
成为
“孩子”
。然后使用
$（this）.nextAll（“.kid”）.toggle（）切换项目。
：


$（“.kid”）.hide（）；
$（“.more kids”）。单击（函数（）{
$（this.nextAll（“.kid”）.toggle（）；
});

更多





更多信息




既然斯宾塞已经回答了，我就把这篇文章作为评论发表。如果链接指向同一个站点，而不需要
http://host
url的一部分，并将换行符更改为css。实际代码使用列表（ul），其内容比显示的内容更多。但我会尝试你的建议，因为我更喜欢干净的代码。我很感谢你的建议，当然还有斯宾塞的修正。既然斯宾塞已经回答了，我就把这篇文章作为一个评论。如果链接指向同一个站点，而不需要
http://host
url的一部分，并将换行符更改为css。实际代码使用列表（ul），其内容比显示的内容更多。但我会尝试你的建议，因为我更喜欢干净的代码。我很感激你的建议，当然，斯宾塞也会帮忙。