整个下拉菜单在页面加载时快速闪烁答案

【问题标题】：Entire drop-down menu quickly flashes upon page load整个下拉菜单在页面加载时快速闪烁
【发布时间】：2012-05-01 11:54:57
【问题描述】：

我有一个标准的下拉菜单，它使用 jQuery 隐藏子 li 元素。但是，在加载站点时，子元素会迅速出现并随后消失（有点像快速闪烁）。我认为这与 flash-of-unstyled-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();
});

【问题讨论】：

请发布示例 html 和 css。如果你有的话，还有 jQuery 或 JS。对我来说效果很好。
@chepe263：发布 html、css 和 jQuery

标签： javascript jquery html css drop-down-menu

【解决方案1】：

在页面的 CSS 中将下拉菜单设置为 display: none，或者使用 style="display:none" 直接在元素本身中设置。这将在页面加载时隐藏它。

【讨论】：

我不认为我可以将 style="display:none" 添加到元素本身，因为此菜单是通过 Wordpress 的功能动态生成的。但我明白你的意思，我会把它添加到 CSS 中。

【解决方案2】：

我有同样的问题 :( 除非我在加载时使用 css 隐藏它，我现在遇到的问题是它永远不会显示！即使将鼠标悬停在父级上...

甚至在我发布回复之前，我就想再尝试一件事

#navigation ul ul{
    display:none;
}

而不是

#navigation ul ul li{
    display:none;
}

现在完美运行

【讨论】：

【解决方案3】：

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

ul li {
  display:none;
}

【讨论】：

【解决方案4】：

试试：

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

其中 '.mobile-menu' 是您为菜单的包含元素指定的任何类或 ID。

例如

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

【讨论】：