.slideToggle() запускается много раз?

Question

Я пытаюсь создать тему Tumblr, в которой ссылки и сообщения публикуются, когда вы нажимаете знак +. (Мой тестовый блог на http://noitsnotitsnotokay.tumblr.com/)

Я совсем begginner на JavaScript, но я был в состоянии работать это для меню ссылок с помощью следующего кода:

<span class="btn">+</span> 
<ul class="lks"> 
<!-- various links are here --> 
</ul> 

<script> 
$("ul.lks").hide(); 
$("span.btn").click(function() { 
    $("ul.lks").slideToggle("slow"); 
}); 
</script> 

Но я также есть кусок кода, который применяется ко всем сообщениям, для информации о сообщении. Я использовал почти тот же код, но, как вы, вероятно, видите, он скользит в разные моменты времени.

<div class="pstinfo"> 
    <!-- info is here --> 
</div> 
<span class="plsign">+</span> 

<script> 
$("div.pstinfo").hide(); 
$("span.plsign").click(function() { 
    $("div.pstinfo").slideToggle("slow"); 
}); 
</script> 

Похоже, что порядок кнопки и способ, которым я называю классы в JavaScript, не сильно меняются ... любые советы?

Answer 1

код блока 01

<span class="btn">+</span> 
<ul class="lks"> 
<!-- various links are here --> 
</ul> 

<script> 
$("ul.lks").hide(); 
$("span.btn").click(function() { 
    $("ul.lks").stop().slideToggle("slow"); 
}); 
</script> 

Код блока 02

<div class="pstinfo"> 
    <!-- info is here --> 
</div> 
<span class="plsign">+</span> 

<script> 
$("div.pstinfo").hide(); 
$("span.plsign").click(function() { 
    $("div.pstinfo").stop().slideToggle("slow"); 
}); 
</script> 

Попробуйте этот код и обновить результат :)

Answer 2

Если вы не хотите, чтобы открыть все». pstinfo ', когда вы нажимаете «.plsign», просто подключите, попробуйте этот код:

HTML:

<div class='parentContainer'> <!--put your elements in a parent Container --> 
     <div class='info'> 
      Info 1 
     </div> 
     <div class='plsign'> 
      + Open 
     </div> 
    </div> 
    <div class='parentContainer'> 
     <div class='info'> 
      Info 2 
     </div> 
     <div class='plsign'> 
      + Open 
     </div> 
    </div> 
    <div class='parentContainer'> 
     <div class='info'> 
      Info 3 
     </div> 
     <div class='plsign'> 
      + Open 
     </div> 
    </div> 

JS:

$(".plsign").on('click',function() 
{ 
    $(this).parent().find('.info').slideToggle("slow"); 
}); 

Ссылка на jsFiddle