Question

我需要一些Jquery的帮助。

我有这串代码触发我的下拉菜单显示/隐藏（可见性）：

// toggle the menu items' visiblity
      .find('h2')
         .bind('click focus', function(){
            $(this).parent().toggleClass('expanded')
         });

代码取自： http://filamentgroup.com/examples/rwd-nav-patterns/

但是，我希望能够使用Jquery切换它（想要平滑过渡）。

问题：

如何调整此代码以使slideToggle正常工作？

我尝试用'slideToggle'替换'toggleClass'，这在某种程度上起作用，但改为切换我的菜单，从而隐藏'h2'。

JSFiddle链接：请稍微调整窗口大小以便@Media Query启动。红色框（右上角）代表下拉菜单。

http://jsfiddle.net/87G6a/

非常感谢所有评论/答案，并将进行表决。

谢谢。

Answer 1

这可能就是你要找的东西。

http://jsfiddle.net/defmetalhead/2ezsP/

$('.mainMenu').children('li').on('click', function() {
   $(this).children('ul').slideToggle('slow'); 
});

该代码中的所有内容都可以以不同（更好）的方式完成。但是，请检查此更新的小提琴。 http://jsfiddle.net/defmetalhead/87G6a/2/

 .find('h2')
    .bind('click focus', function () {
    $('ul').slideToggle('slow');
  });

对于你需要的东西更具说服力。

Answer 2

$('nav ul li').hover(function(){
    $(this).find('.sub-menu li').slideToggle();
});

slideToggle下拉菜单

http://jsfiddle.net/87G6a/

2 个答案: