jquery slidetoggle hide上一个元素

Question

我正在处理单击的slideToggle函数，我想隐藏之前点击过的元素，点击了一个新的元素，我之前使用过相同的一组代码，它现在不再工作，我在为什么它不再工作难倒了：

我的代码下面或查看jsfiddle

JS/js.js

$('.togglesources').hide(); 
$('.captionsource').on('click', function() { 
      $(this).next('.togglesources').slideToggle(); 
      $(this).parent().siblings().children().next().slideUp(); 
         return false; 
     }); 

的index.html

<div class="mostpopular"> 
      <h4>Nokia:</h4> 
      <h5>3100</h5> 
      <p>Most popular mobile phone of the year</p> 
       <div class="sources"> 
        <p class="captionsource">Click to toggle source</p> 
         <div class="togglesources"> 
          <p class="source"><a href="http://en.wikipedia.org/wiki/List_of_best-selling_mobile_phones#2003">Wikipedia (Data Source)</a></p> 
          <p class="source"><a href="http://gsmsolution24.blogspot.co.uk/2012/01/nokia-3100-3120-6100-hardware-repair.html" target="_blank">GSM Solution (Image Source)</a></p> 
         </div><!-- End Toggle Sources --> 
       </div><!-- End Sources --> 
     </div> 
     <!-- END MOST POP --> 
     <div class="mostpopular"> 

      <h4>Lord of the Rings:</h4> 
      <h5>Return of the King</h5> 
       <p>Highest Grossing Film</p> 
       <div class="sources"> 
        <p class="captionsource">Click to toggle source</p> 
        <div class="togglesources"> 
         <p class="source"><a href="http://en.wikipedia.org/wiki/List_of_highest-grossing_films#High-grossing_films_by_year" target="_blank">Wikipedia</a></p> 
        <p class="source"><a href="http://www.imdb.com/title/tt0167260/" target="_blank">IMDB (Image Source)</a></p> 
         </div> <!-- End Toggle Sources --> 
       </div> <!-- End Sources --> 

     </div> 

希望能对此有所帮助。

为什么当我打开一个新的“.togglesources”div时会关闭？

Answer 1

试试这个：

$('.togglesources').hide(); 
    $('.captionsource').on('click', function() { 
    $(this).closest('.mostpopular').siblings().find('.togglesources').slideUp(); 
      $(this).next('.togglesources').slideToggle(); 
      $(this).parent().siblings().children().next().slideUp(); 
    return false; 
     }); 

Working Fiddle