如果没有悬停，jQuery会阻止隐藏div

Question

我有一个包含几个div的网站（在virtemart-shop中的产品容器）。它们都有相同的类，在每个div中，都有一个名为.togglecart的div。

我有这个功能;当它悬停在名为.produktbox的parent-div上时显示这个togglecart-div，并在悬停时隐藏它：

<script>
jQuery(document).ready(function () {
    if(!!('ontouchstart' in window)){
}
else {
    jQuery('.togglecart').hide();
    jQuery('.produktbox').hover(function() { 
        jQuery(this).children('.togglecart').show("slow"); 
    }, function() { 
        jQuery(this).children('.togglecart').hide("slow"); 
        });
    };
});
</script>

在togglecart-div中是添加到购物车按钮和选择/下拉列表（可供选择的添加到购物车数量）。当然，这个选择列表在移动时会消失，因为它不在.produktbox区域内。我使用selectpicker将select-list转换为ul li-downdown菜单。这可以防止此列表消失。但是在选择一个值之后，包含add-to-cart-button的悬停的togglecart-div消失了。原因：单击一个值后，下拉列表消失，然后鼠标位于togglecart-div。

之下

...获得足够的声望点，现在从本地testserver发布图片：

如何在单击一个值后防止togglecart-div消失？

Answer 1

看起来你想要的是.togglecart div在检查里面的复选框时不隐藏。

在这种情况下，只要选中复选框，就可以在这些div上将“hold”属性设置为true，并在取消选中时将其设置为false。稍后当你隐藏div时，只有当属性不为真时才会这样做。

代码：

jQuery(document).ready(function () {
    if(!!('ontouchstart' in window)){
    }
    else {
        jQuery('.togglecart[hold!="true"]').hide();
        jQuery('.produktbox').hover(function() { 
            jQuery(this).children('.togglecart').show("slow"); 
        }, function() { 
            jQuery(this).children('.togglecart[hold!="true"]').hide("slow"); 
        });
    };

    $(".mycheck").click(function(){
        if(this.checked){
            $(this).parent().attr("hold", "true");
        }
        else{
            $(this).parent().attr("hold", "false");
        }
    })
});

并且jsfiddle：http://jsfiddle.net/Laj0u2re/