Question

我有以下脚本，但当我从#menu移动光标时，#dropdown消失了。如何保持.dropdown开放？

$(document).ready(function() {
$(".menu").hover(function() {
   $(".dropdown").show();        
}, function() {
   $(".dropdown").hide();
 });        
});

HTML

<ul>
   <li><a href="#">Home</a></li>
   <li class="menu">
       <a href="#">Dropdown</a>
       <ul class="dropdown">
          <li><a href="#">Sub Page</a></li>
       </ul>
   </li>
</ul>

Answer 1

如果不使用JS，您可以完成您尝试做的事情。这是一个纯CSS解决方案：

解决方案1：

HTML：

<ul>
   <li><a href="#">Home</a></li>
   <li class="menu">
       <a href="#">Dropdown</a>
       <ul class="dropdown">
          <li><a href="#">Sub Page</a></li>
       </ul>
   </li>
</ul>

CSS：

.dropdown {
    display: none;
}
.menu:hover > .dropdown {
    display: block;
}

<强> FIDDLE

解决方案2：

HTML：

<ul>
   <li><a href="#">Home</a></li>
   <li class="menu">
       <a href="#">Dropdown</a>
       <ul class="dropdown">
          <li><a href="#">Sub Page</a></li>
       </ul>
   </li>
</ul>

CSS：

.dropdown {
    display: none;
}

JavaScript的：

$(function () {

    var $dropdown = $('.dropdown'),
        $menu = $('.menu'),
        timeout;

    $menu.on('mouseenter', function () {
        clearTimeout(timeout);
        $dropdown.show();   
    }).on('mouseleave', function () {
        timeout = setTimeout(function () {
            $dropdown.hide();   
        }, 200);
    });

    $dropdown.on('mouseenter', function () {
        clearTimeout(timeout);
        $dropdown.show();   
    }).on('mouseleave', function () {
        timeout = setTimeout(function () {
            $dropdown.hide();   
        }, 200);
    });    

});

<强> FIDDLE

Answer 2

.hover获取在另一个（第二个）参数中鼠标离开时运行的代码。如果您想保持菜单打开，请使用.mouseenter事件处理程序：

$(document).ready(function() {
   $(".menu").mouseenter(function() {
      $(".dropdown").show(); 
   });        
});

如何让show（）函数保持打开状态

2 个答案: