整个下拉菜单快速闪烁页面加载

我有一个标准的下拉菜单，使用jQuery隐藏儿童li元素。但是，在加载站点后，子元素快速出现并随后消失（有点像快速闪烁）。我认为这与Flashlight of -styled-content已知问题毫无关系。整个下拉菜单快速闪烁页面加载

该网站是希伯来语，但不应该影响任何东西。该网站位于here

如果你想要一个示例HTML + CSS和Javascript代码，我很乐意在这里发布它。

我只是想知道如果有人之前遇到过这个问题。我在Chrome中看到它，并且我没有真正检查它是否也发生在IE和Firefox中。

谢谢！

编辑：下面示出HTML/CSS/JS：

HTML：

<ul class="menu"> 
    <li><a href="#">blah</a> 
    <ul class="sub-menu"> 
     <li><a href="#">blah</a></li> 
    </ul> 
    </li> 
</ul>

CSS：

/* NAVIGATION -- level 1 */ 
ul.menu { float: right; list-style-type: none; font-size: 15px; margin-top: 50px; } 
ul.menu > li{ float: right; display: inline; position: relative; margin-left: 30px; } 
ul.menu li > a { display: block; color: #5c5d5f; text-decoration: none; border-bottom: solid 1px #9b9a95; } 

ul.menu li:hover > a, ul.menu li a:hover , ul.menu li.current_page_item > a { color: black; } 
body.home .current_page_item > a { } 
body.home .current_page_item > a:hover { } 

/* NAVIGATION -- level 2 */ 
ul.menu li > div { display: none; width: 157px; height: 171px; margin-right: -10px; position: absolute; opacity:0; background: url(images/subNav_bg.png) no-repeat top right; } 

ul.menu li > div span { height: 15px; background: transparent; display: block; } /* used to push down the menu */

JS：

// navigation menu // 
// add hasSubMenu to each li that has one // 
$('.menu > li').has('ul').addClass('hasSubMenu'); 

// wrap with <div> // 
$('li.hasSubMenu > ul').wrap('<div />'); 
$('ul.menu li > div').css('display', 'none'); 
$('ul.menu li > div').prepend('<span></span>'); 
$('li.hasSubMenu > a').click(function() { 
    return false; 
}); 

// add class to <div> for extendedBg // 
$('li.extendedBg').find('div').addClass('subBg2'); 

$('li.hasSubMenu').hover(function() { 
    // hover on 
    $(this).addClass('hover').find('div').stop().fadeTo("medium", 1, /* when done fading */ 
     function() { 
      $(this).find('div').css('display', 'block'); 
      //$(this).find('ul').css('display','block'); 
     } 
    ); 

}, function() { 
    // hover off 
    $(this).removeClass('hover').find('div').stop().fadeOut(); 
});

来源

2012-04-19 Amit

请张贴样本HTML和CSS。还有jQuery或JS，如果你有。它对我来说工作得很好。 – chepe263 2012-04-19 21:28:18

@ chepe263：发布html，css和jQuery – Amit 2012-04-19 21:35:18

设置的下拉菜单如display: none在页面' s CSS或直接在元素本身使用style="display:none"。这会在页面加载时隐藏它。

来源

2012-04-19 21:29:33 Blazemonger

我不认为我可以将style =“display：none”添加到元素本身，因为此菜单是通过Wordpress的函数动态生成的。但我明白你的意思，我将它添加到CSS。 – Amit 2012-04-19 21:37:13

我建议设置样式来显示：样式表中没有li元素，以便浏览器知道最初将它们呈现为不显示。然后，当jQuery加载时，jQuery添加的内联样式将覆盖显示样式。

ul li { 
    display:none; 
}

来源

2012-04-19 21:30:00

我有同样的问题:(除了当我用CSS来隐藏它负载，我现在有它永远不会显示的问题！甚至悬停在父母的时候...

即使之前我贴我的答复我认为Id尝试一件事

#navigation ul ul{ 
    display:none; 
}

，而不是

#navigation ul ul li{ 
    display:none; 
}

，现在它瓦特兽人完全

来源

2013-01-04 11:37:27 Rob

尝试：

.mobile-menu:not(.mm-menu) { 
    display: none; 
}

其中“移动菜单”是你给你的菜单中包含的元素无论什么阶级或ID。

e.g

<div class="mobile-menu"> 
    <ul> 
     <li><a href="/about">about</a></li> 
     <li><a href="/food">Food</a></li> 
    </ul> 
</div>

来源

2016-03-02 00:57:51 Max

整个下拉菜单快速闪烁页面加载

回答

相关问题