5

「すべてを展開」と「すべてを折りたたむ」を含める方法を探していました。単純なjqueryアコーディオンを使用して、新しいコードでデモを更新しました。

元のコードは、 http： //www.stemkoski.com/stupid-simple-jquery-accordion-menu/のRyanStemkoskiにクレジットされている必要があります。

デモ： http： //jsbin.com/ucalu3/5/

$(document).ready(function() { 
  $('.question').click(function() {

  if($(this).next().is(':hidden') != true) {
                $(this).removeClass('active'); 
    $(this).next().slideUp("normal");
  } else {
    $('.question').removeClass('active');  
     $('.answer').slideUp('normal');
    if($(this).next().is(':hidden') == true) {
    $(this).addClass('active');
    $(this).next().slideDown('normal');
     }   
  }
   });

  $('.answer').hide();

  $('.expand').click(function(event)
    {$('.question').next().slideDown('normal');
        {$('.question').addClass('active');}
    }
  );

  $('.collapse').click(function(event)
    {$('.question').next().slideUp('normal');
        {$('.question').removeClass('active');}
    }
  );
});
4

2 に答える 2

5

これははるかに簡単に解決できます。

展開/折りたたみたいアコーディオン要素（'.ui-widget-content'）でjQueryのhide/showコマンドを使用するだけです。

例：

$(document).ready(function() {
        $('.expand').click(function() {
            $('.ui-widget-content').show();
        });
        $('.collapse').click(function() {
            $('.ui-widget-content').hide();
        });
});

フィドルを参照してください：http：//jsfiddle.net/ekelly/hG9b5/11/

于 2013-07-03T13:44:47.803 に答える
3

展開リンクと折りたたみリンクにクラスまたはIDを追加すると、このようなものが機能します

$(document).ready(function() {
  $("#expand").click(function(){
    ('.answer').slideDown('normal');
  });

  $("#collapse").click(function(){
    ('.answer').slideUp('normal');
  });
}
于 2010-10-06T11:48:09.167 に答える