javascript - 单击一个菜单下拉菜单时启用所有菜单下拉菜单

Question

说明

我已四处寻找此问题，但无法找到针对此特定问题的解决方案和/或建议。

我有一个导航菜单，其中包含带有下拉列表的项目。单击任何一个带有下拉列表的菜单按钮时，将启用这些下拉列表，此后下拉列表将在悬停时显示/隐藏。如果在启用下拉菜单时单击屏幕上的其他任何位置，它们会立即被禁用并消失。

抱歉，我的解释很糟糕，这是我能说的最好的方式:-(

我在这里制作了一个基本示例(下拉菜单不显示，他们只是登录控制台):

http://jsfiddle.net/VFJA3/4/

请忽略所有 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    
        }
    });
}

Answer 1

由于没有其他建议，我会将我的评论作为建议:

1. 在函数initializeDropDowns 中将dropDownsOn 设为局部变量。这对于在函数中注册的所有事件处理程序都可用。

2. 将initializeDropDowns 转换为类，并将事件处理程序和dropDownsOn 添加为成员变量。构造的对象可以作为数据绑定(bind)到 $(document) 并在事件处理期间检索。