javascript - 内容切换问题 - 一次 1 个

Question

我正在为我正在构建的网站使用切换脚本，我想一次切换一件事，但它会一次性完成所有操作。你可以明白我的意思here .

以下是 head 标签之间的代码:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("ul").hide(); //added this line
    $("p").click(function(){
        $("ul").toggle();
    });
});
</script>

这是正文中的代码:

<p class="toggle">+ <span class="intoggle">Apple iPad 2</span></p>
<ul><li>Display Screen (LCD) Only Replacement - $99.99</li>
<li>Top Glass (Digitizer) Only Replacement (Black) – $109.99</li>
<li>Top Glass (Digitizer) Only Replacement (White) – $109.99</li></ul>

<p class="toggle">+ <span class="intoggle">Apple iPad Mini/Mini Retina</span></p>
<ul><li>Display Screen (LCD) Only Replacement - $139.99</li>
<li>Retina Display Screen (LCD) Only Replacement - $139.99</li>
<li>Top Glass (Digitizer) Only Replacement (Black) – $129.99</li></ul>

我只想切换一个<p></p>一次。有人能告诉我哪里出错了吗？谢谢。 :)

Answer 1

而不是仅仅调用 ul(它将定位所有 ul)，您想要专门定位在 p 之后的那个点击。 $(this) 指的是被单击的元素，然后您可以调用 next()

$(this).next("ul").toggle();

FIDDLE