Jquery 手风琴展开全部折叠全部

发布于 2024-09-26 11:29:42 字数 1147 浏览 4 评论 0原文

我正在寻找一种包含“全部展开”和“全部折叠”的方法。我已经使用简单的 jquery 手风琴用新代码更新了演示。

原始代码应归功于 Ryan Stemkoski，网址为 http://www.stemkoski。 com/stupid-simple-jquery-accordion-menu/

$(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');}
    }
  );
});

原文

I was looking for a way to include an "expand all" and "collapse all". I've updated the demo with the new code using a simple jquery accordion.

The original code should be credited to Ryan Stemkoski at http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/

Demo: 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');}
    }
  );
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

千紇 2024-10-03 11:29:43

这可以更容易地解决。

只需在要展开/折叠的手风琴元素（'.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/

This can be resolved much easier.

Simply use the jQuery hide/show command on the accordion element ('.ui-widget-content') you want to expand/collapse.

example:

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

See fiddle: http://jsfiddle.net/ekelly/hG9b5/11/

回复收藏 0 原文

野心澎湃 2024-10-03 11:29:43

我会向展开和折叠链接添加一个类或 ID，然后类似这样的操作就可以了

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

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

I would add a class or ID to the expand and collapse links then something like this will work

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

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

回复收藏 0 原文

~没有更多了~