jQuery:在悬停在子菜单项目上时保持子菜单打开

Question

这已经被问到很多。但是我似乎找不到有效的解决方案。我有一个jQuery代码，可以打开我的子菜单在悬停的情况下，但是在我尝试浏览子菜单项目后，它消失了。我该如何解决？

这是我的代码：

$('.hover').hover(
  function() {
    $('.drop-box').show();
  },
  function() {
    $('.drop-box').hide();
  })
});

.drop-box {
    position: absolute;
    width: 100%;
    height: 60px;
    background: darkgreen;
    top: 60px;
    left: 0;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover">hover</div>
  <div class="drop-box">
    <div class="container row">
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
    </div>
  </div>
</div>

Answer 1

仅将.drop-box及其所有内容放入.hover中。另外，您需要删除top属性，以防止文本和.drop-box之间的差距。

$('.hover').hover(
                function () {
                    $('.drop-box').show();
                },
                function () {
                    $('.drop-box').hide();
                }
            );

.drop-box {
    position: absolute;
    width: 100%;
    height: 60px;
    background: darkgreen;
    // top: 60px;
    left: 0;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover">hover<div class="drop-box">
    <div class="container row">
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
    </div>
   </div>
  </div>
  

更新：

如果您不能将.drop-box移至.hover中，则可以使用DIV包装所有内容，并使用CSS添加悬停事件：

.drop-box {
  position: absolute;
  width: 100%;
  height: 60px;
  background: darkgreen;
  // top: 60px;
  left: 0;
  display: none;
}
.everything:hover .drop-box {
  display: block;
}

<div class="everything">
  <div class="hover">hover</div>
  <div class="drop-box">
    <div class="container row">
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
      <div class="col-md-4">
        <p class="mb-0">Text</p>
      </div>
    </div>
  </div>
</div>