jquery自定義手風琴評論部分

Question

我正在爲網站構建評論部分，並且遇到了自定義手風琴效果的問題。

我知道這很簡單，但是無法讓它工作。

下面是代碼：

<li class="main"> 
     <span class="expand-collapse"></span> 

     <ul class="responses"> 
      <li> 
       <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
      </li> 
     </ul> 
</li> 

<li class="main"> 
     <span class="expand-collapse" href="#"></span> 

     <ul class="responses"> 
      <li> 
       <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
      </li> 
     </ul> 
</li> 

$('.expand-collapse').click(function(){ 
     $(this).toggleClass('minus'); 
     if($(this).hasClass('minus')){ 
      $(this).find('ul.responses').slideDown(500); 
     }else{ 
      $(this).find('ul.responses').slideUp(500); 
     } 
    }); 

更新的代碼：

$('.expand-collapse').click(function(){ 
     $(this).toggleClass('minus'); 

     $(this).parent().children('ul.responses').slideToggle(500); 
]); 

任何想法如何得到這個工作。我需要確保手風琴是包含的，所以如果我點擊擴展按鈕只有最接近的線程擴展..不是所有的。

看起來我可以使用slideToggle以及。

我玩過最接近（），發現（），下一步（）都沒有成功.. 任何幫助嗎？ 謝謝

Answer 1

$('.expand-collapse').click(function(){ 
     $(this).toggleClass('minus'); 
     if($(this).hasClass('minus')){ 
      $(this).parent().children('ul.responses').slideDown(500); 
     }else{ 
      $(this).parent().children('ul.responses').slideUp(500); 
     } 
    }); 

試試這個。我將形成$（this）給父母，並返回給帶有答覆類的孩子。

Answer 2

這裏是對此的一個工作翻譯。 鏈接:: http://jsfiddle.net/mlgmainstream/DTnem/12/

你的jquery是在正確的軌道上。 評論在JSFiddle上。

這裏是你做了什麼::

$(".expand-collapse a").click(function(e) { 
e.preventDefault(); 

//add a open class so user knows which one is opened. 
$(this).toggleClass("minus"); 

//go up a parent dir, then target the "next" element 
// which is "ul .responses" 
//** this should already be hidden in CSS 
$(this).parent().next().slideToggle(500); 

}）;