Javascript 使下拉菜单即使在鼠标悬停丢失时仍可见

我需要有下拉菜单项的主菜单。所以，当用户悬停菜单项时，就会显示下拉菜单。这已经由CSS和：hover选择器完成。 然而，通常当：hover丢失时（鼠标移到菜单项元素之外），相应的dropodown也会消失。但我所需要的-菜单仍然可以看到，只有在单击时才会消失

这种影响的一个例子如下：

然而，我不明白是哪个CSS或JS创建了这种效果，所以我不能在这里添加snipper（如果可以，我不会问）。 在这个特定的示例中，当您悬停菜单项“Pages”时，会出现下拉菜单，但当：hover丢失时，下拉菜单不会消失。它就在那里。我无法找到，是什么造成了这种效果-是一些JS还是CSS

HTML:

 <ul class="navigation clearfix">   
        <li class="active">
            <a href="#">HOME</a>
        </li>

        <li>
            <a href="#">pages</a>
            <ul class="drop-down">
                <li>
                    <a href="event.html">Event</a>
                </li>
                <li>
                    <a href="blog.html">Blog</a>
                </li>
                <li>
                    <a href="blog-detail-page.html">Blog-Detail</a>
                </li>
                <li>
                    <a href="travel-info.html">Travel-Info</a>
                </li>
                <li>
                    <a href="404-page.html">404</a>
                </li>
            </ul>
        </li>
    </ul>

---

您可以在

mouseenter

上向包含下拉列表的

li

元素添加类似

.open

的类

然后这样做：

var dropdown = $(".is-dropdown");

dropdown
  .on("mouseenter", function() {
    $(this)
      .addClass("open");
  })
  .on("click", function() {
    $(this).removeClass("open");
  }); 

---

---

代码片段：

var dropdown=$（“.is dropdown”）；
下拉列表
.on（“mouseenter”，function（）{
$（本）
.addClass（“公开”）；
})
.on（“单击”，函数（）{
$（此）.removeClass（“打开”）；
});
.clearfix{
显示：块；
}
保险商实验室{
列表样式类型：无；
}
ul，
ol{
字体大小：100%；
线高：1.5；
列表样式：无；
}
.navigation>li{
填充：16px 0px 36px 26px；
浮动：左；
位置：相对位置；
线高：1.5em；
}
.下拉列表{
位置：绝对位置；
顶部：100px；
宽度：160px；
z指数：999；
左：-9999px；
不透明度：0；
过渡：顶部。2秒缓和，不透明度。2秒缓和；
}
.navigation>.open.下拉列表{
顶部：76px；
左：自动；
左：16px；
右：0；
不透明度：1；
}


















我确信此功能还有其他参数，但这里为您提供了一个基本解决方案


$（文档）.ready（函数（）{
$（'.drop-down'）.slideUp（0）；//隐藏所有下拉列表
$（'.navigation-li:has（>ul.drop-down'））.on（'mouseenter'，function（）{
$（this.children（'ul'）.slideDown（）；
});
$（'.closeEm'）。在（'click'，函数（e）上{
e、 preventDefault（）；//这会在单击时停止页面跳转
$（'ul.drop-down'）.slideUp（）；
});
});
.clearfix{
显示：块；
}
保险商实验室{
列表样式类型：无；
}
ul，
ol{
字体大小：100%；
线高：1.5；
列表样式：无；
}
.navigation>li{
填充：16px 0px 36px 26px；
浮动：左；
位置：相对位置；
线高：1.5em；
}
李先生{
背景色：#ddd；
}
.下拉列表{
位置：绝对位置；
顶部：70像素；
宽度：160px；
z指数：999；
背景色：#eee；
}

























我不确定我是否理解您正在尝试做什么，但我想这个示例将是您需要的：
我真的建议不要在附加事件的回调中附加事件。更新了fiddle和snippet。干净的解决方案。很好。在这个解决方案中，当鼠标悬停丢失时，下拉列表被删除。对不起，我的错。正如其他人所说，您需要使用JS。
var dropdown = $(".is-dropdown");

dropdown
  .on("mouseenter", function() {
    $(this)
      .addClass("open");
  })
  .on("click", function() {
    $(this).removeClass("open");
  });