整個下拉菜單快速閃爍頁面加載

我有一個標準的下拉菜單，使用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

整個下拉菜單快速閃爍頁面加載

回答

相關問題