我需要控制隐藏/显示某些跨度。我在这里找到了一些示例，基本代码有效。这是我的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>
如果您制作的id's 是数字，则表明您可能应该使用 aclass代替。你可以做的是改变你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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句