li
我有一个使用 jQuery 隐藏子元素的标准下拉菜单。但是,在加载站点时,子元素会迅速出现并随后消失(有点像快速闪烁)。我认为这与 flash-of-unstyled-content 已知问题完全无关。
该网站是希伯来语的,但这不应该影响任何事情。该站点位于此处
如果您想要 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();
});