Question

我创建了一个我在很多网站上使用过的下拉菜单。由于某些原因，在这个应用程序（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');
        }
    }
);

Answer 1

我弄清楚问题是什么。当我在导航中的a属性上空盘旋时，我有一个混乱的CSS代码行，不知何故被添加并说要应用某些样式。这些带有li悬停样式/ JS的样式存在冲突并导致一些问题。我删除了CSS系列，我们都很好！

IE和Firefox中的闪烁下拉菜单

1 个答案: