1

解释

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

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

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

我在这里制作了一个基本示例（下拉菜单不显示，它们只是登录控制台）：

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

请忽略所有 HTML 和 CSS，创建它的最简单方法是将所有代码都堆进去，这与此问题无关。

我的问题

如您所见，我有一个名为MN.dropDownsOn. 此属性是一个布尔值，用于指示下拉菜单是否应显示在 上mouseenter。单击菜单项或未单击的任何内容时，布尔值将启用/禁用...

我想知道的是这是否可以以更好的方式实现？我真的不喜欢存储一个全局值来指示下拉菜单是否启用，但我想不出更好的方法。有什么建议么？

提前致谢

为了便于访问，这是我的 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    
        }
    });
}
4

1 回答 1

1

由于没有其他建议通过，我将把我的意见作为建议：

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

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

于 2012-12-14T19:34:52.437 回答