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

jQuery下拉列表悬停

1 个答案: