Question

我有以下jquery打开并关闭div＆＃34; shopping_cart＆＃34;当悬停在＆＃34; shopping_button＆＃34;

上时

$('#shopping_button, .shopping_cart').on('mouseenter',function(){
  $(this).css('z-index','300');
  $(this).css('visibility','visible');
 })
$('#shopping_button, .shopping_cart').on('mouseleave',function(){
  $(this).css('z-index','189');
  $(this).css('visibility','hidden');
  $(this).css('opacity','0');
 });

需要帮助我想要实现的目标是＆＃34; shopping_cart＆＃34;在mouseleave上保持打开状态，只有在＆＃34; shopping_cart＆＃34;之外点击时才关闭。 div或者可以在＆＃34; shopping_cart＆＃34;内添加关闭按钮。 div关闭它。

谢谢你们。

被修改

我在上面的代码

中添加了以下内容

$('html').click(function () {
    $('.shopping_cart').css('visibility','hidden');
});

它完成了这项工作，只有在外面点击时关闭窗口＆＃34; shopping_cart＆＃34; div，但现在再次徘徊在＆＃34; shopping_button＆＃34;它不会打开＆＃34; shopping_cart＆＃34; div，在inspect元素上显示

$('#shopping_button, .shopping_cart').on('mouseenter',function(){
  $(this).css('z-index','300');
  $(this).css('visibility','visible'); <---This Remain Hidden
 })

有任何建议吗？

排序
将此添加到mouseenter功能

  $('.shopping_cart').css('visibility','visible');

和vollhhaaaa ....：D

仍在寻找更干净的解决方案，如果有人有......

感谢您的帮助。

Answer 1

尝试查看此JSFiddle：http://jsfiddle.net/m8nrzL7d/2/

$('#shopping_button').mouseenter(function(){
   $("#shopping_cart").css('display','block');
})
$('#btn-close').click(function(){
   $("#shopping_cart").css('display','none');
})
$('html').click(function() {
   $("#shopping_cart").css('display','none');
});

$('#shopping_cart').click(function(event){
    event.stopPropagation();
});

我已经改变了一些你的代码，但这很简单：我添加了一个按钮，因为它的实现速度更快;然后我用ID而不是class替换了购物车，因为根据我的经验，我在课堂和jquery上遇到了麻烦。我使用display: none代替visibility: none，因为我认为购物车不应占用空间（或者它必须占用空间？请参阅here）

编辑：如果你点击外面，我还添加了关闭购物车的功能！有关解释，请参阅here！

我希望我帮助过你......

Answer 2

使用css类来格式化元素要好得多：

.shopping_cart {
z-index: 189;
visibility: hidden;
opacity: 0;
}
.shopping_cart_active{
z-index: 300;
visibility:visible;
}

所以你在悬停时将addclass shopping_cart激活：

$('#shopping_button, .shopping_cart').on('hover',function(){
$(this).addClass('shopping_cart_active');
});

当你想要它之外你可以使用它：

$(html).on('click', function(){
$('.shopping_cart.).removeClass('shopping_cart_active');
})

在mouseleave之后保持悬停div打开，并在div窗口或关闭按钮外单击关闭它

2 个答案: