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。

我玩过最近的（），find（），next（）都没有成功.. 有帮助吗？谢谢

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

这是一个有效的演绎。 link :: 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);

}）;

jquery定制手风琴评论部分

2 个答案: