javascript - jQuery 显示/隐藏 div 无法正常工作

Question

我有一个子菜单 div，里面有一个购物车 span。当用户将鼠标悬停在它上面时，它会显示我隐藏的购物车 DIV。然后用户可以将鼠标移动到 DIV 以删除项目。

如果用户显示并将鼠标移动到隐藏的 DIV 中，然后移出它，则 DIV 会重新隐藏

我遇到的问题是，如果用户显示 DIV 但不是移动到隐藏的 DIV，而是返回子/主菜单 DIV 没有重新隐藏，我已经尝试了所有我能想到的。

这是我的 Fiddle .

如果你不先去 div 它就不会隐藏它。

$('#subMenuCartBox').mouseover(function () {
  $('#cartBox').show();
  $('#cartBox').mouseleave(function () {
    $('#cartBox').hide();
  });
}).mouseleave(function () {
  setTimeout(function () {
    if (!$('#cartBox').length) {
      $('#cartBox').hide();
    }
  });
})

.mainMenu {
  width: 100%;
  height: 75px;
  background-color: lightblue;
}

.subMenu {
  width: 100%;
  height: 45px;
  background-color: gray;
  text-align: right;
  padding: 10px;
}

.subMenuOptionSpan {
    display: inline-flex;
}

.subMenuCartBox {
    background-color: deepskyblue;
    padding: 5px;
    width: 100%;
    cursor: pointer;
}

.cartBox {
    float: right;
    padding: 15px;
    background-color: lightgray;
    display: none;
    left: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainMenu">
  Main menu options
</div>

<div class="subMenu">
  <div class="row justify-content-end align-items-center">
    <span class="subMenuOptionSpan col-12 col-sm-auto">
      <i class="fas fa-user fa-lg"></i>
      <div id="username">Test of long username</div>
    </span>
    <span id="subMenuCartBox" class="subMenuOptionSpan col-12 col-sm-auto">
      <i class="fas fa-shopping-cart fa-lg"></i>
      <div id="cartAmountBox" class="subMenuCartBox">
        <span id="cartAmountText" class="subMenuCartAmount">0 item(s) - £0.00</span>
      </div>
    </span>
  </div>
</div>

<div id="cartBox" class="cartBox">
  <b id="emptyCart">There are currently no items in your cart.</b>
</div>

我需要隐藏的 DIV 来重新隐藏如果用户在页面上的任何地方而不必进入它然后离开它。

Answer 1

使用 Jquery，您可以检查鼠标在哪一侧离开按钮，并在您将按钮留在底部时保持 div 打开。

$('#subMenuCartBox').mouseover(function () {
  $('#cartBox').show();

  $('#subMenuCartBox').mouseleave(function (e) {
    var $this = $(this);
    var bottom = $this.offset().top + $this.outerHeight();
     if(e.pageY < bottom) {
      console.log("CLOSE");
      $('#cartBox').hide();
    }
  });

  $('#cartBox').mouseleave(function () {
    $('#cartBox').hide();
  });
}).mouseleave(function () {
  setTimeout(function () {
    if (!$('#cartBox').length) {
      $('#cartBox').hide();
    }
  });
})