jquery - 将鼠标悬停在购物车和打开它的选项卡上时隐藏购物车

Question

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

1. 单击购物车然后鼠标离开它而不输入购物车项目时，我无法隐藏购物车项目。
2. 我不能将鼠标悬停在购物车和购物车项目上而不阻止购物车项目隐藏。

cart 和 cart_items 在两个相邻的 div 中。

HTML

<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>

jQuery

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

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

我做了很多在线搜索，并在两个 div 中添加了许多 jQuery mouseenter 和 mouseleave，但不知何故，这些事件相互取消了。

Answer 1

试试这个。检查你搬到哪里。还要将选择器更改为 #container 以使鼠标离开：

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

Answer 2

如果您将 cart_item div 放在购物车 div 中，然后在购物车 div 上定义 mouseleave 函数，它应该可以满足您的需求。

http://jsfiddle.net/uedyW/3/

<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();
 });

Answer 3

您可以将它们都包装起来，然后使用该外部容器：

<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();
 });

示例：http: //jsfiddle.net/uedyW/6/