jQuery下拉列表悬停

Question

这就是我想出的。

的HTML

<ul class="treatment-menu">
    <li>Always visible menu</li>
       <ul class="nav-child">
          <li>Hidden menu</li>
       </ul>
</ul>

悬停功能

$('.treatment-menu li').hover(function () {
        $(this).find('.nav-child').show();
    },
    function () {
        $(this).find('.nav-child').hide();
});

FIDDLE http://jsfiddle.net/HBMfB/3/

不过，我不能让.navchild时显示.treatment-menu li盘旋。

有任何想法吗？

谢谢。

Answer 1

您可以为此使用CSS

http://jsfiddle.net/PpYQS/

.nav-child {

    display:none;
}
.treatment-menu:hover .nav-child
{
    display:block;
}

如果您使用的是jquery，则可以执行.toggle（）而不是编写show()和hide()

http://jsfiddle.net/rbw8v/

$('.treatment-menu li').hover(function () {
        $(this).find('.nav-child').toggle();
    });

或.slideToggle（）获得幻灯片效果。

$('.treatment-menu li').hover(function () {
        $(this).find('.nav-child').slideToggle();
    });