我创建了一个下拉菜单,并在许多网站上使用过。出于某种原因,在此应用程序 ( http://quaker.wpengine.com/ ) 中,菜单闪烁并且在 Firefox 和 IE8-10 中都错位了。它在 Chrome 和 Safari 中运行良好。知道为什么会这样吗?我认为这是一个 CSS 问题,但我终究无法弄清楚。
感谢您的帮助!
这是我在菜单上使用的 JS:
//Add necessary classes to navigation
$('ul.level-1 > li > ul').addClass('level-2');
$('ul.level-1 ul > li ul').addClass('level-3');
$('li:has(> ul)').addClass('has-subnav');
// Mobile Navigation
$('body').addClass('js');
var $menu = $('#menu'),
$menulink = $('.menu-link'),
$menuTrigger = $('.has-subnav > a');
$menulink.click(function(e) {
//e.preventDefault();
$menulink.toggleClass('active');
$menu.toggleClass('active');
});
$menuTrigger.click(function(e) {
if ( $(window).width() < 768) {
e.preventDefault();
}
var $this = $(this);
$this.toggleClass('active').next('ul').toggleClass('active');
});
//Remove active class on desktop version
$('ul.level-1 > li').hover(
function () {
$('ul.level-1 > li').removeClass('active');
var $this = $(this);
if( $this.children('ul.level-2').css('display') != 'none' ) {
$this.addClass('active');
} else {
$this.removeClass('active');
}
},
function () {
var $this = $(this);
if( $this.children('ul.level-2').css('display') != 'none' ) {
$this.addClass('active');
} else {
$this.removeClass('active');
}
}
);
最佳答案
我想出了问题所在。我有一行 CSS 代码以某种方式被添加并说当您将鼠标悬停在导航中的 a
属性上时应用某些样式。这些样式与 li
悬停样式/JS 存在冲突并导致了一些问题。我删除了 CSS 行,我们都很好!
关于jquery - IE 和 Firefox 中的下拉菜单闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16735805/