在鼠标移出后保持子菜单处于活动状态

15 浏览
0 Comments

在鼠标移出后保持子菜单处于活动状态

当用户将鼠标悬停在我的水平菜单上时，我如何保持子菜单打开，直到悬停在另一个菜单项上？以下是源代码：\nHTML\n

\nCSS\n

#nav {
    width:100%;
    margin:0;
    padding:12px 0 4px 0;
    height:30px;
    position:relative;
}
#nav li {
    float:left;
    list-style:none;
    display:inline
}
#nav a {
    text-decoration:none;
}
#nav li ul li a {
    margin:0
}
#nav .active a, #nav li:hover>a {
    background:#ac2024;
    color:#fff;
}
#nav li a:hover, #nav ul a:hover {
    background:#ac2024;
    color:#fff
}
#nav ul {
    position:absolute;
    left:0;
    height:27px;
    width:100%;
    display:none;
}
#nav li:hover>ul {
    display: inline;
}
#nav ul a {
    width:100%
}
#nav:after {
    content:".";
    display:inline;
    clear:both;
    visibility:hidden;
    height:0
}
#nav {
    display:inline-block
}

\n如果使用CSS无法实现，如何使用jQuery来实现？谢谢。

0

2 答案

0 Comments

这个问题的出现原因是无法通过CSS单独实现。可以通过在li项目上添加'hover-class'类来解决，使用jQuery来实现。当鼠标悬停在新菜单项上时，添加'hover-class'类到新项目，并从旧项目上移除。在JavaScript中跟踪最后一个悬停的项目，并根据这个数据来操作视图。希望能有人能用纯CSS解决这个问题。以下是解决方案：

$(document).ready(function(){
  var lastHoveredItem = null;
  
  $("li").hover(function(){
    if(lastHoveredItem){
      $(lastHoveredItem).removeClass("hover-class");
    }
    $(this).addClass("hover-class");
    lastHoveredItem = this;
  });
});

0
0 Comments

问题出现的原因：

这个问题是因为在移动设备上无法使用hover事件，而该代码中使用了hover事件来控制子菜单的显示和隐藏。因此，在移动设备上无法保持子菜单的激活状态。

解决方法：

为了在移动设备上也能实现子菜单的激活状态，需要基于点击事件来实现。可以通过添加点击事件的代码来解决这个问题。

以下是代码示例：

$("#hover1").on("click", function () {
  $("#visible1").addClass("result_hover");
  $("#visible2").removeClass("result_hover");
});
$("#hover2").on("click", function () {
  $("#visible2").addClass("result_hover");
  $("#visible1").removeClass("result_hover");
});

需要注意的是，在移动设备上，由于无法使用hover事件，点击事件将会替代hover事件来控制子菜单的显示和隐藏。因此，在移动设备上点击父菜单将会显示对应的子菜单，再次点击父菜单将会隐藏子菜单。而在桌面设备上，仍然可以通过鼠标的悬停来实现子菜单的显示和隐藏。

0