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 も使用できるようです。

私はclosest()、find()、next()で遊んだことがありますが、すべて成功しませんでした..何か助けはありますか? ありがとう

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) から親に行き、response クラスで子に戻ります。

于 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 に答える