Javascript 单击菜单项后，关闭菜单并恢复类名和jquery

好的。。。所以，我有这个下拉菜单工作，因为我想。。。然而，我试图找出如何在单击菜单项后将函数恢复到其原始状态

因此，首先，当您触发该函数时，它会执行以下操作： 它可以调出.menu\u hide和.lockscreen for.menu\u show和.lockscreen\u 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\u show和.lockscreen\u on到.menu\u hide和.lockscreen\u 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的滚动，而不仅仅是将您带到新的url/页面。不过，这两种情况都会发生。

我认为它正在按预期工作。我必须修复一些可能在转换为JSFIDLE时被切换的id名称。据我所知。这使得somename2分区仍然显示。我假设它是空白的，只是为了锁定屏幕，对吗

出于测试目的，我还将链接更改为一个新选项卡。仅供参考

有关更改包括：

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

---

我觉得你把事情弄得太复杂了。对atriggerMobileMenu和ulmobileMenu 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
}

---

请参见

能否设置JSFIDDLE？on和show类的属性是否始终存在默认值？如果是这样的话，为什么不将它们附加到ID，然后只切换_hide和_off类。[我在JS Fiddle中向live working页面所在的站点添加了一条评论。触发下拉菜单的移动菜单选择图标位于左上角。好的，我至少看到了一个问题。您正在调用autoCloseOnClick:true哪个Chrome报告为函数。但您没有在任何地方定义它。去掉它，看看是否有问题工作。乔希谢谢！这有助于我更好地理解。谢谢你的努力！工作得像个冠军！谢谢你帮助我把它做得更好、更简洁！