Question

说明

我已经搜索过这个但是无法找到针对这个特定问题的解决方案和/或建议。

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

对不起的解释感到抱歉，这是我能说的最好方法： - （

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

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    
        }
    });
}

Answer 1

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

在函数initializeDropDowns中创建dropDownsOn局部变量。这将在函数中注册的所有事件处理程序可用。
将initializeDropDowns转换为类，并将事件处理程序和dropDownsOn添加为成员变量。构造的对象可以作为数据绑定到$（文档）并在事件处理期间检索。

单击一个时启用所有Menu Drop Downs

说明

我的问题

1 个答案: