Jquery 在远离购物车和打开购物车的标签时隐藏购物车

我使用两个div实现了一个购物车。包含购物车映像的“购物车”div和包含购物车项目的“购物车项目”div。 单击购物车图像时，我可以使购物车项目向下滑动。我可以在将购物车悬停然后离开时隐藏购物车项目，我遇到的问题有：

我无法在单击购物车然后在不输入购物车项目的情况下将其鼠标移动时隐藏购物车项目

如果不阻止购物车和购物车项目隐藏，我无法将鼠标悬停在购物车和购物车项目上

购物车和购物车项目位于两个相邻的分区中

HTML

---

我做了大量的在线搜索，并在两个div中添加了许多jQuery mouseenter和mouseleave，但不知怎的，这些事件相互抵消了。

试试这个。检查你要搬到哪里去。同时将选择器更改为鼠标左键的#容器：

$('#container').mouseleave(function (e) {
            if (e.toElement.id != 'cart')
                $('#cart_items').hide();
        });

---

如果您将您的cart\u item div放在cart div中，然后在cart div上定义mouseleave函数，那么它应该满足您的需要

包含将从数据库中提取的项
$（“#购物车”）。单击（函数（）{
$（'cart#u items'）。向下滑动（“300”）；
});
$（'#cart'）.mouseleave（函数（）{
$（“#购物车项目”）.hide（）；
});

您可以同时包装它们，然后使用外部容器：

<div id="outerContainer">
    <div id='header'>
        <div id='cart'>
            <img src='cart.png'>
        </div>
    </div>
    <div id='container'>
        <div id='cart_items'>contain items that will be pulled from database</div>
    </div>
</div>

---

示例：

您是否可以在JSFIDDLEWING上模拟它存在的情况：divs头和容器是另一个div的一部分？您可以尝试使用父div吗？（使用标题代替购物车）。我刚看到马克在桥上。你能在其他浏览器上试试吗？如果调试浏览器，控制台是否显示任何js错误？尝试更新fiddle。不确定它是否在那里工作：是否在我的本地机器上使用建议的解决方案您没有将（e）放入函数中。

$('#container').mouseleave(function (e) {
            if (e.toElement.id != 'cart')
                $('#cart_items').hide();
        });

<div id='header'>
    <div id='cart'>
        <img src='cart.png'>
        <div id='cart_items'>contain items that will be pulled from database</div>
    </div>
</div>

 $('#cart').click(function () {
     $('#cart_items').slideDown("300");
 });

 $('#cart').mouseleave(function(){
        $('#cart_items').hide();
 });

<div id="outerContainer">
    <div id='header'>
        <div id='cart'>
            <img src='cart.png'>
        </div>
    </div>
    <div id='container'>
        <div id='cart_items'>contain items that will be pulled from database</div>
    </div>
</div>

 $('#cart').click(function () {
     $('#cart_items').slideDown("300");
 });

 $('#outerContainer').mouseleave(function (e) {
      $('#cart_items').hide();
 });