javascript - 下拉菜单无法正确打开和关闭

Question

将鼠标悬停在导航链接上时，我已经打开和关闭了它，但是如何保持打开状态以便访问菜单上的内容？我需要它来准确地工作下拉菜单的工作方式。

这是我到目前为止所做的，我还需要 html 布局保持不变。

$('.nav-link--dropdown').mouseover(function() {
  $('.dropdown-menu').css('display', 'block');
});

$('.nav-link--dropdown').mouseleave(function() {
  $('.dropdown-menu').css('display', 'none');
});

ul {
  list-style: none;
  padding: 0px;
  display: flex;
}

li {
  margin-right: 10px;
}

.dropdown-menu {
  display: none;
}

.dropdown-menu ul {
  display: block;
  background-color: grey;
  color: white;
  padding: 10px;
  text-align: center;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li class="nav-link">home</li>
    <li class="nav-link--dropdown">dropdown</li>
  </ul>
</div>
<div class="dropdown-menu">
  <ul>
    <li class="dropdown-menu__link">random text</li>
    <li class="dropdown-menu__link">random text</li>
    <li class="dropdown-menu__link">random text</li>
  </ul>
</div>

在 jsFiddle 上查看

标签： javascripthtmljquery

Answer 1

应该为此删除边距使用填充，否则当我们进入该边距区域时将触发鼠标离开事件。

$('.nav-link--dropdown').mouseover(function () {
    $('.dropdown-menu').css('display', 'block');
});

$('.dropdown-menu').mouseover(function () {
    $('.dropdown-menu').css('display', 'block');
});

$('.nav-link--dropdown').mouseleave(function () {
    $('.dropdown-menu').css('display', 'none');
});

$('.dropdown-menu').mouseleave(function () {
    $('.dropdown-menu').css('display', 'none');
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  padding: 0px;
  display: flex;
}

li {
  padding: 10px;
}

.dropdown-menu {
  display: none;
}

.dropdown-menu ul {
  display: block;
  background-color: grey;
  color: white;
  padding: 10px;
  text-align: center;
  width: 200px;
}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="nav">
    <ul>
        <li class="nav-link">home</li>
        <li class="nav-link--dropdown">dropdown</li>
    </ul>
</div>
<div class="dropdown-menu">
    <ul>
        <li class="dropdown-menu__link">random text</li>
        <li class="dropdown-menu__link">random text</li>
        <li class="dropdown-menu__link">random text</li>
    </ul>
</div>