jquery - slideToggle 下拉菜单

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 正常工作？

我已经尝试将“toggleClass”替换为“slideToggle”，这在某种程度上是有效的，但会向上切换我的菜单，从而隐藏“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'); 
});

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

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

关于您需要的东西更具体一些。