Question

我有这样的标记：

<ul class="dropdown">
<li><a href="/home">Home</a></li>
<li><a href="/about">About Us</a></li>
<li><a href="#">Courses</a>
<ul>
    <li><a href='whatever'>A Level</a></li>
    <li><a href='whatever'>Arts</a></li>
    <li><a href='whatever'>Commerce</a></li>
    <li><a href='whatever'>I.B.</a></li>
    <li><a href='whatever'>Science</a></li>
    </ul>

</li>
<li><a href="/college/collegeFinder">Find A College</a></li>
<li><a href="/college">College Reviews</a></li>
<li><a href="/contact">Contact Us</a></li>

</ul>
</nav>

和jquery：

$(document).ready(function(){
mainmenu();
$('#slider1').bxSlider({
    autoHover: true,
    auto: true,
    pause: 7000,
    prevImage: 'images/upleft.png',
    nextImage: 'images/upright.png'
});

function mainmenu(){
    $(" .dropdown ul ").css({display: "none"}); // Opera Fix
    $(" .dropdown li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(200);
        },function(){
        $(this).find('ul:first').slideUp(200);
    });
}
});

编辑:(忽略bxslider部分）

我对jquery不是很好，只是从一些教程中选择了这个脚本。基本上，当页面加载时，下拉列表打开，直到页面的其余部分加载。这只是一秒或两秒，但它真的很烦人。可以在这里看到：passout.co.in 有什么想法吗？

Answer 1

默认情况下，您可以使用CSS隐藏它：

ul.dropdown li 
{
    display: none;
}

Answer 2

将ul.dropdown的CSS规则添加到display：none或opacity：0，这更适合。这样，在页面加载时，它会一直隐藏，直到你的jQuery被激活。

干杯！

Answer 3

它被称为FOUC（Flash Of Unstyled Content）并且可以通过隐藏您想要显示的内容或使用jquery应用样式或事件冒泡来避免它。所以写一些css类可以隐藏页面加载的下拉列表。

jquery下拉保持打开状态直到完成页面加载

3 个答案: