时间戳

首页 > 解决方案 > Bootstrap 4下拉菜单悬停与Jquery

javascript - Bootstrap 4下拉菜单悬停与Jquery

问题描述

我有一个带有 Jquery 动画的 Bootstrap 下拉菜单。动画正是我想要的，但是当我将鼠标光标从 Dropdown 的名称 ( .dropdown) 移动到 Dropdown 的项目时，它变得疯狂。

$('.dropdown').hover(function() {
    $(this).find(".dropdown-menu").first().stop(true, true).show("slide", {
        direction: "up"
    }, 250);
}, function() {
    $(this).find(".dropdown-menu").first().stop(true, true).hide("slide", {
        direction: "up"
    }, 250);
});

这是我的代码笔： https ://codepen.io/nht910/pen/yLNqQwX

我该如何解决这个问题？

太感谢了。

标签： javascriptjquerybootstrap-4

解决方案

只需编辑您的CSS代码即可解决问题。.dropdown>div这是因为和.dropdown>a元素之间的垂直距离

用它：

.navbar {padding:0 !important;}
  .dropdown {
    position: relative;
    z-index: 2;
}
.dropdown> a{
   padding: 15px;
}
@media (min-width: 768px) {
  .dropdown>div {
     position: absolute;
     top: 80%;
     clip: rect(0.5rem, 9999px, 9999px, -9999px);
     z-index: 1;
  }
}

推荐阅读