Content Toggling Issue - 1 At A

Question

Я использую сценарий переключения для веб-сайта, который я создаю. & Я хотел бы переключать одну вещь за раз, но она делает все сразу. Вы можете видеть, что я имею в виду here.

Вот код, который идет между тегами головы:

<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