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); 

}）;