Question

我试图创建一个购物车小部件。我的想法是，这是一个显示您购物车中有多少物品的盒子，当您点击它时，它会展开并显示购物车内容的详细信息。

我设法让它打开了，但是当我想关闭它时会出现问题。这应该发生在mouseout事件，但我不能让它正常工作。

这是html：

<div id="cart-wrapper" class="clearfix">
  <div id="cart">
    Cart 0 item(s) <img src="images/arrow-down.png" alt="cart">
  </div>
  <div id="cart-open">
    <ul>
      <li>Morbi</li>
      <li>Praesen</li>
      <li>Phasellus</li>
      <li>Pellentesque</li>
    </ul>
  </div>
</div>

所以＃cart-open是需要时隐藏/显示的那个。默认情况下显示：无应用

heres js：

$(function() {
   $('#cart').live('click', function(event) {
        $('#cart-open').css('display', 'block');
        $(this).css('border-bottom', 'none');
    });

   $('#cart-wrapper').live('mouseout', function (event) {
       $('#cart-open').css('display', 'none');
       $('#cart').css('border-bottom', '1px solid  #F0F0F0');
   })
});

所以问题是，当我点击#cart框时，它很好地打开并显示＃cart-open，但是当我移动鼠标时，mouseout事件是在＃cart-wrapper的旧尺寸上触发的，这是一个乞讨的大小的#cart。是否可以在其子项更改大小后重新验证包装器的大小？或许还有另一种方法可以完成这项工作。这个想法很简单：当我将鼠标移出#cart或＃cart-open时，隐藏#cart open。

Answer 1

您是否尝试过“mouseleave”？

试试这个：

$(function() {
    $("#cart-open").hide();
    $("#cart").live("click", function() {
        $("#cart-open").show();
        $(this).css("border-bottom", "none");
    });

    $("#cart-wrapper").live("mouseleave", function() {
        $("#cart-open").hide();
        $("#cart").css("border-bottom", "1px solid #F0F0F0");
    })
});

我只在FireFox上测试了这个，但它确实有效。如果你想玩http://jsfiddle.net/cWRWD/2/

，我在这里也添加了一个例子

希望有所帮助。

元素调整大小后的jQuery mouseout事件

1 个答案: