0

我正在建立一个网站的评论部分，并且在自定义手风琴效果方面遇到了麻烦。

我知道这很简单，但是很难让它工作。

这是代码：

<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。

我玩过最接近（），查找（），下一个（）都没有成功..有什么帮助吗？谢谢

4

2 回答 2

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) 发送给父级并返回给子级。

于 2013-03-13T17:12:36.167 回答
0

这是对此的工作演绎。链接:: 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);

});

于 2013-03-13T17:34:52.640 回答