Question

好的...所以我有这个下拉菜单，因为我喜欢...但是我试图弄清楚如何将功能恢复到原来的状态之后单击一个菜单项。

首先，当你触发它所做的功能时，＆amp;工作得很好以下：它将.menu_hide和.lockscreen换成.menu_show和.lockscreen_on。

// show and hide mobile menu
$('#triggerMobileMenu').click(function(e) {
    e.preventDefault();
    // Toggle all 4 classes off or on
    $('#mobileMenu').toggleClass('menu_hide menu_show');
    $('#mobileScreen').toggleClass('lockscreen_off lockscreen_on');

但是现在我试图添加另一篇文章，说明一旦单击一个菜单项，关闭菜单并将类从.menu_show和.lockscreen_on交换回原始状态，再转换为.menu_hide和.lockscreen_off。

    $('#mobileMenu ul li a').on('click',function(){
        $('#mobileMenu').toggleClass('menu_show menu_hide')({ autoCloseOnClick: true });
        $('#mobileScreen').toggleClass('lockscreen_on lockscreen_off')({ autoCloseOnClick: true });
    });
});

我还应该注意，在同一页面上，可能会发生滚动到id＃，只需将您带到新的网址/页面即可。两种情况都会发生。

Answer 1

我认为它按预期工作。我不得不修改一些可能已经转换为jsfiddle的id名称。 Here's a working one据我所知。这使somename2 div仍然显示。我认为这将是空白的，只是为了锁定屏幕吗？

我还将链接更改为新选项卡以进行测试。 FYI。

相关变化是：

$('#somename1 ul li a').on('click',function(){
    $('#somename1').toggleClass('menu_show menu_hide')({ autoCloseOnClick: true });
    $('#somename2').toggleClass('lockscreen_on lockscreen_off')({ autoCloseOnClick: true });
});

Answer 2

我认为你这太复杂了。对＃triggerMobileMenu和ul＃mobileMenu li a使用相同的事件处理程序，因为你让它们做同样的事情（切换菜单和另一个元素的可见性）。

$('a#triggerMobileMenu, ul#mobileMenu li a').on('click', function(evt){
    evt.preventDefault();
    $('#mobileMenu').toggleClass('menu_hide menu_show');
    $('#mobileScreen').toggleClass('lockscreen_off lockscreen_on');
});

如果您需要知道在事件处理程序中单击了哪个元素，则可以使用evt.target：

if( $(evt.target).is($('a#triggerMobileMenu')) ) {
    // do stuff
}

请参阅http://jsfiddle.net/Mph6t/3/

单击菜单项后，关闭菜单并还原类名和＆amp; jQuery的

2 个答案: