jquery垂直菜单popout&切换

时间:2014-05-25 19:37:46

标签: javascript jquery html toggle

如何在下面的小提琴示例中添加展开全部链接并折叠菜单中的所有链接?

还有一种方法可以使用菜单按钮弹出菜单,使用较小屏幕的媒体查询,单击时菜单应该在同一个示例中打开屏幕的一侧

http://jsfiddle.net/PZHF5/

Thanks

1 个答案:

答案 0 :(得分:2)

要展开/折叠全部,您可以添加以下内容。请注意,这不会与您的插件进行通信,因此它是一种非常简单的解决方法。话虽如此,看起来您自己修改代码并没有做太多工作。至于响应式菜单按钮 - 您尝试了什么?

HTML

<a href="#" class="xpnd">Expand all</a>
<a href="#" class="clps">Collapse all</a>

的jQuery

var $ul = $('.topnav li ul'),
    $sp = $('.topnav span'),
    dur = 300;
$('.xpnd').click(function(e){
    e.preventDefault();
    $ul.slideDown(dur);
    $sp.replaceWith('<span>[-]</span>');
});
$('.clps').click(function(){
    e.preventDefault();
    $ul.slideUp(dur);
    $sp.replaceWith('<span>[+]</span>');
});