如何隐藏subnav菜单,直到鼠标悬停?
问题描述:
我正在使用子导航菜单,它在鼠标悬停上为其放置动画。它工作得很好,除了初始页面加载时,菜单默认显示。如果鼠标悬停在外,它会按预期消失,但我无法弄清楚如何在页面加载时将其隐藏,然后使其显示在悬停上。如何隐藏subnav菜单,直到鼠标悬停?
<script type="text/javascript">
function nav(){
$('.nav li').hover(function() {
$(this).find('ul:first').stop().animate({height: '200px', opacity: '100'}, {queue:false, duration:200, easing: 'easeInSine'})
}, function() {
$(this).find('ul:first').stop().animate({height: '0px', opacity: '0'}, {queue:false, duration:100, easing: 'easeInCirc'})
});
};
$(document).ready(function() {
nav();
});
</script>
答
一类添加到子菜单<ul>
的,并添加CSS规则来设置display: none;
例如:
<ul class="subMenu">
和
.subMenu { display: none; }