Jquery可折叠面板全部展开全部折叠

gev0vcfq  于 2022-11-22  发布在  jQuery
关注(0)|答案(2)|浏览(270)

我一直在寻找一种方法来包含“全部展开”和“全部折叠”。我已经使用一个简单的jquery accordion 用新的代码更新了演示。
原始代码应记入Ryan Stemkoski的帐户,地址为http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/

演示: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');}
    }
  );
});
sqserrrh

sqserrrh1#

这个问题解决起来容易得多。
只需对要展开/折叠的可折叠元素('. 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/

6ojccjat

6ojccjat2#

我会在展开和折叠链接中添加一个类或ID,这样就可以工作了

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

  $("#collapse").click(function(){
    ('.answer').slideUp('normal');
  });
}

相关问题