Question

基本上我使用jquery创建了一个滑动菜单。

见下面的代码......

menu_slide = function (e) {

    e.preventDefault();

    if ( menuOpen == false ) {

        $('.pane').animate({
            'top' : $('#navigation ul').outerHeight() + 'px'
        }, 250 );
        menuOpen = true;

        $('#top').bind( "click", menu_slide ); 

    } else if ( menuOpen == true ) {

        $('#top').unbind("click");

        $('.pane').animate({
            'top' : 0 + 'px'
        }, 250 );
        menuOpen = false;

    }
}

被此解雇......

$("a.menu-button").on( "click", menu_slide );

现在，当我的菜单打开时，我想将点击事件绑定到div#top，以便div区域充当关闭菜单的按钮。但菜单关闭我想删除它。

我想我的使用方法......

$('#top').bind( "click", menu_slide );

然后使用...

删除它

$('#top').unbind("click");

会产生预期的效果。但是当我打开菜单时它会立即关闭。

而这一切都是因为这一行... $('#top').bind( "click", menu_slide );

有人可以告诉我哪里出错吗？

Answer 1

听起来您的a.menu_button元素已嵌入div#top：

中

<div id='top'>
    <a class='menu_button'></a>
    <a class='menu_button'></a>
    <a class='menu_button'></a>
</div>

如果是这种情况，那么当您单击menu_button并将click事件绑定到处理程序的顶部时，原始menu_button单击将向上传播，并随后触发div#top单击事件。请参阅Fiddle。

为了防止这种情况，您需要停止a.menu_button点击的传播。您可以通过以下方式执行此操作：

return false; // stops propagation AND prevents default

或

e.stopPropagation(); // stops propagation

请参阅Fiddle

注意，我的演示使用$.one()绑定到顶部div。此方法将处理程序绑定到仅执行一次的事件，然后自动解除绑定。这对于您想要处理单个事件非常方便，并且不想担心手动取消绑定。

Answer 2

打开菜单时是否有任何理由绑定事件？菜单关闭时可以点击$('#top')吗？

我认为你最好从一开始就绑定它们

$('a.menu-button, #top').click(menu_slide);

然后摆脱$.bind()和$.unbind()来电。

由于您已经在检查变量以查看菜单是打开还是关闭，因此单击其中一个应该可以正常运行，并且我假设在关闭菜单时隐藏了#top元素。

将click事件绑定到运行相同函数的函数中

2 个答案: