Javascript jQuery下拉菜单在IE和Webkit中的行为不同
期望的行为是: 单击父项打开下拉菜单 单击页面或父级上的任意位置,关闭下拉菜单 我的jQuery代码在Safari和Firefox中运行良好,但在IE8中却不行。在IE 8中,当第一次单击父对象时,下拉菜单将再次打开和关闭。第二次单击父级时,下拉菜单保持打开状态。我正在使用jquery1.6.2 以下是jQuery代码,有点像弗兰肯斯坦(Frankenstein),我从我读到的不同方法中拼凑而成:Javascript jQuery下拉菜单在IE和Webkit中的行为不同,javascript,jquery,internet-explorer,internet-explorer-8,Javascript,Jquery,Internet Explorer,Internet Explorer 8,期望的行为是: 单击父项打开下拉菜单 单击页面或父级上的任意位置,关闭下拉菜单 我的jQuery代码在Safari和Firefox中运行良好,但在IE8中却不行。在IE 8中,当第一次单击父对象时,下拉菜单将再次打开和关闭。第二次单击父级时,下拉菜单保持打开状态。我正在使用jquery1.6.2 以下是jQuery代码,有点像弗兰肯斯坦(Frankenstein),我从我读到的不同方法中拼凑而成: $(function() { /* for keeping track of what's "op
$(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和Firefox不同,我将不胜感激。一个链接到一个现有的解决方案,做我所描述的也将是伟大的。请像和一个迟钝的孩子说话一样解释,因为jQuery/Javascript不是我的专长 showMenu;在焦点上被称为鼠标下键,然后在点击鼠标上释放hideMenu;这就是为什么如果你再次点击它,它就会工作,因为它已经聚焦了。但是如果你点击它,我打赌你也会得到同样的行为。。我会删除“focus”代码imo或设置focus,这样它就不会干扰单击您的第一个建议成功了。我不知道如何做你建议的第二件事“聚焦,这样就不会干扰点击”,但这样就可以了。