2

我刚刚构建了一个下拉菜单，我想在单击时将其下拉，然后在再次单击后返回。这与我使用的切换完美配合，但问题是下拉后，链接不执行。

$（函数（）{

    $("#nav_menu-2 ul.menu ul").css({ display: 'none' });


    $("#nav_menu-2 ul.menu #testbutton").toggle(function() {


        $(this).find('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "show", "opacity": "show" }, 300 );
    }, function(){

        $(this).find('ul.sub-menu')
            .stop(true, true).delay(50).animate({ "height": "hide", "opacity": "hide" }, 300 );
    });

});

所以我的猜测是，在菜单下降后，它会在点击后返回，而不是执行链接。但由于我对 javascript/jQuery 很陌生，所以我不知道我还有什么其他选择。有任何想法吗？

4

2 回答 2

2

我会改为使用slideToggle，绑定到应该打开菜单的按钮的单击事件：

$("#nav_menu-2 ul.menu #testbutton").click(function() {
  $('ul.sub-menu').slideToggle();
});

根据菜单的构建方式，您可能需要稍微更改选择器。

于 2012-08-09T12:44:18.223 回答
2

这是toggle()的已知副作用。文档说：

该实现还调用事件，因此如果在元素上调用.preventDefault()了链接，则不会跟踪链接，也不会单击按钮。.toggle()

要解决这个问题，您必须绑定到click而不是toggle. 正如 Andrew 所说，您可以使用slideToggle()从click事件中获得相同的行为。

于 2012-08-09T12:46:14.680 回答