javascript - 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();
});

小提琴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();
    });