Question

我得到了这种导航：

<ul>
<li><a href="#">Navi 1</a>
<ul class="navisub" style="display:none">
 <li>Subnavi 1</li>
 <li>Subnavi 2</li>
</ul>
</li>
<li><a href="#">Navi 2</a>
<ul class="navisub" style="display:none">
 <li>Subnavi 3</li>
 <li>Subnavi 2</li>
</ul>
</li>
</ul>

主要问题是，当我悬停“Navi 1”li时，subnavi应该显示。但是当我用光标进入subnavi时，一切都在隐藏。

那是我的代码：

$('#navi li').mouseenter(
    function () {
        //show its submenu
        $('ul.navisub', this).css('display','block');

    }).mouseleave( 
    function () {
        //hide its submenu
        $('ul.navisub', this).css('display','none');         
    }
);

有什么建议吗？非常感谢你们！

Answer 1

前段时间我遇到了同样的问题，我使用hover解决了问题（也使用了show / hide）：

$('#navi li').hover(
    function () {
        //show its submenu
        $('ul.navisub', this).show();
    },
    function () {
        //hide its submenu
        $('ul.navisub', this).hide();         
    }
);

Answer 2

根据您的目标浏览器要求，可以在没有JavaScript的情况下执行此操作。查看纯CSS demo here。

如果你需要IE6中的工作，那么jQuery是一个很好的解决方案。如果需要，我可以使用jQuery版本扩展它：）

修改：jQuery version here。

第二次编辑：New version可以做你想做的事。

Answer 3

鉴于此，我认为你的意思是＆lt; ul＆gt;有一个“navi”的身份？

<ul>
    <li><a href="#">Navi 1</a>
    <ul class="navisub" style="display:none">...



$('#navi li').mouseenter(
    function () {...

Answer 4

您也可以添加一些动画。使用toggleFade

$('#navi li').hover(function() {
$(this).find('ul.navisub').stop(true, true).fadeToggle(600); 
});

注意.stop方法，这将使动画停止排队，停止开/关的速度比动画时间快。您可以将（600）更改为您想要的任何设置为0.6秒的时间，以毫秒为单位。

结帐jsFiddle

Jquery下拉导航

4 个答案: