说明
我已四处寻找此问题,但无法找到针对此特定问题的解决方案和/或建议。
我有一个导航菜单,其中包含带有下拉列表的项目。单击任何一个带有下拉列表的菜单按钮时,将启用这些下拉列表,此后下拉列表将在悬停时显示/隐藏。如果在启用下拉菜单时单击屏幕上的其他任何位置,它们会立即被禁用并消失。
抱歉,我的解释很糟糕,这是我能说的最好的方式:-(
我在这里制作了一个基本示例(下拉菜单不显示,他们只是登录控制台):
请忽略所有 HTML 和 CSS,创建此内容的最简单方法是将所有代码都堆进去,这与此问题无关。
我的问题
如您所见,我有一个名为 MN.dropDownsOn
的属性。此属性是一个 bool 值,指示下拉列表是否应显示在 mouseenter
上。当单击菜单项或单击任何其他内容时,将启用/禁用 bool 值...
我想知道是否可以通过更好的方式实现这一点?我真的不喜欢存储全局值来指示下拉列表是否启用,但我想不出更好的方法。有什么建议吗?
提前致谢
为了方便访问,这是我的 JS:
MN.dropDownsOn = false;
/**
* Initialize the Drop Downs
* Initialize the Drop Downs in the Navigation Menu
*/
MN.initializeDropDowns = initializeDropDowns;
function initializeDropDowns(){
// THIS IS THE PART I AM UNSURE ABOUT
$(document).on('click','.dropdown',function(e){
// Enable all the drop downs
MN.dropDownsOn = true;
// Ensure this down is now visible
$(this).trigger('mouseenter');
// Stop jQuery from disabling the dropdowns
e.stopPropagation();
});
$(document).click(function(){
// Enable all the drop downs
MN.dropDownsOn = false;
});
// BELOW IS FINE, APART FROM THE MN.DROPDOWNSON MIGHT NEED TO GO
// Set the hover functions
$(document).on('mouseenter','.dropdown',function(){
if(MN.dropDownsOn){
// Show the dropdown
}
});
// Set the hover functions
$(document).on('mouseleave','.dropdown',function(){
if(MN.dropDownsOn){
// Hide the dropdown
}
});
}
最佳答案
由于没有其他建议,我会将我的评论作为建议:
在函数initializeDropDowns 中将dropDownsOn 设为局部变量。这对于在函数中注册的所有事件处理程序都可用。
将initializeDropDowns 转换为类,并将事件处理程序和dropDownsOn 添加为成员变量。构造的对象可以作为数据绑定(bind)到 $(document) 并在事件处理期间检索。
关于javascript - 单击一个菜单下拉菜单时启用所有菜单下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13861088/