簡單的手風琴與jquery

Question

我用jquery構建簡單的手風琴。我嘗試使用jquery.next（）方法，但沒有運氣，沒有發生點擊。我應該採用另一種jQuery方法，或者我正確的方式，有任何想法嗎？ 這裏是我的html：

 <article class="TimBox"> 
      <img src="/images/Tim01.jpg"> 
      <div class="TimBoxTekst"> 
      <h2>Title 1</h2> 
      <h3>Subtitle 1</h3> 
      <div class="LinkBox"> 
       <a href="#">more<i class="fa fa-angle-right"></i></a> 
      </div> 
      </div> 
      <div class="clear"></div> 
      <div class="TimBoxBio">Hidden text 1</div> 
     </article> 

     <article class="TimBox"> 
      <img src="/images/Tim01.jpg"> 
      <div class="TimBoxTekst"> 
      <h2>Title 2</h2> 
      <h3>Subtitle 2</h3> 
      <div class="LinkBox"> 
       <a href="#">more<i class="fa fa-angle-right"></i></a> 
      </div> 
      </div> 
      <div class="clear"></div> 
      <div class="TimBoxBio">Hidden text 2</div> 
     </article> 

這裏是我的jQuery：

$(document).ready(function() { 
    $(".TimBox .LinkBox").click(function() { 
     if($(this).next(".TimBoxBio").is(":visible")){ 
      $(this).next(".TimBoxBio").slideUp(); 
     return false; 
     } else { 
      $(".TimBox .TimBoxBio").slideUp(); 
      $(this).next(".TimBoxBio").slideToggle(); 
     return false; 
     }  
    }); 
}); 

這裏是CSS：

.TimBox .TimBoxBio{ 
    position:relative; 
    display:none; 
} 

Answer 1

的.next（）是用來獲取緊隨其後的兄弟。在你的情況下，.TimBoxBio不是相對於.LinkBox的下一個元素。

試試這個：

$(document).ready(function() { 
    $(".TimBox .LinkBox").click(function() { 
     var $bio = $(this).closest('.TimBox').find('.TimBoxBio'); 

     if($bio.is(":visible")){ 
      $bio.slideUp(); 
      return false; 
     } else { 
      $(".TimBox .TimBoxBio").slideUp(); 
      $bio.slideToggle(); 
      return false; 
     }  
    }); 
}); 

看到這裏的工作小提琴：http://jsfiddle.net/dou457gk/