Question

我刚刚建立了一个下拉菜单，我想在点击时下拉菜单，然后在另一次点击后返回。这完全适用于我使用的切换，但问题是在下拉列表后，链接不会执行。

$（function（）{

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

});

所以我的geuss是在菜单丢失后，它会在点击时返回，而不是执行链接。但由于我对javascript / jQuery很新，我不知道我还有其他选择。有什么想法吗？

Answer 1

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

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

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

Answer 2

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

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

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

jQuery：链接在.toggle（）之后不起作用

2 个答案: