Question

理想的行为是：

点击父级以打开下拉菜单
点击页面或父级上的任意位置，以关闭下拉菜单

我的jQuery代码在Safari＆amp; Firefox，但不在IE 8中。在IE 8中，当第一次单击父级时，下拉菜单会再次打开和关闭。第二次单击父级时，下拉菜单保持打开状态。我正在使用jQuery 1.6.2。

这是jQuery代码（我从我读过的不同方法拼凑起来的一点Frankenstein）：

$(function() {
/* for keeping track of what's "open" */
    var activeClass = 'menu-open', showingDropdown, showingMenu, showingParent;
    /* hides the current menu */
    var hideMenu = function() {
        if(showingDropdown) {
            showingDropdown.removeClass(activeClass);
            showingMenu.fadeOut(500);
        }
    };

    /* recurse through dropdown menus */
    $('.drop').each(function() {
        /* track elements: menu, parent */
        var dropdown = $(this);
        var menu = dropdown.next('.subnav'), parent = dropdown.parent();
        /* function that shows THIS menu */
        var showMenu = function() {
            hideMenu();
            showingDropdown = dropdown.addClass('menu-open');
            showingMenu = menu.show();
            showingParent = parent;
        };
        /* function to show menu when clicked */
        dropdown.attr('href','/#dropdown').bind('click',function(e) {
            if(e) e.stopPropagation();
            if(e) e.preventDefault();
            if ( dropdown.hasClass('menu-open') ) {
                hideMenu();
            } else {
                showMenu();
            }
        });
        /* function to show menu when someone tabs to the box */
        dropdown.bind('focus',function() {
            showMenu();
        });

    });
});

如果有人能给我一个指针，说明为什么IE的行为与Webkit＆amp;不同，我将不胜感激。 Firefox浏览器。指向我所描述的现有解决方案的链接也很棒。请解释好像你正在和一个慢孩子说话，因为jQuery / Javascript不是我的强项。

Answer 1

showMenu（）;正在调用焦点（鼠标按下）然后“点击”（鼠标释放）hideMenu（）;正在被调用，这就是为什么如果你再次点击它它是有效的，因为它已经集中。但如果你点击它我打赌你会得到相同的行为..我会删除'焦点'代码imo或使“焦点”所以它不会干扰“点击”

jQuery Dropdown菜单在IE和Webkit中表现不同

1 个答案: