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

Question

我有一个普通的下拉菜单，使用jQuery来隐藏子级 li 元素。但是，在加载网站时，子元素会快速出现然后消失（类似于快速闪烁）。我不认为这与未经处理内容的瞬间闪烁问题有任何关系。

网站是希伯来语，但这不应影响任何事情。 网站位于此处 如果您想要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();
});

- Amit

---

请发一下HTML和CSS的样例。如果有jQuery或JS的话也请一并发出，我已经测试过它们了，运行良好。 - chepe263

@chepe263：发布了HTML、CSS和jQuery。 - Amit

Answer 1

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

- Blazemonger

---

我认为我无法将style =“display：none”添加到元素本身，因为该菜单是通过WordPress的函数动态生成的。但我知道你的意思，我会将其添加到CSS中。 - Amit

Answer 2

我有�样的问题😔，除�我使用css在加载时将其��，�则它永远�会显示��使鼠标悬�在父级上...�

在��之�，我想�试一件事情。

#navigation ul ul{
    display:none;
}

代替

#navigation ul ul li{
    display:none;
}

现在它完美地运行了。

- Rob

Answer 3

我建议在样式表中设置display:none样式，以便浏览器最初将它们呈现为未显示状态。然后，当jQuery加载时，jQuery添加的内联样式将覆盖显示样式。

ul li {
  display:none;
}

- Brian P Johnson

Answer 4

尝试：

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

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

e.g

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

- Max