Question

我有一些使用jQuery制作“滑块”的经验，但这是我第一次遇到这个问题。在我的div中，我插入了一个选择字段，当我尝试更改它时，在div滑出后，它会使其向后滑动。

我发布了代码here。

Answer 1

嗨，这段代码应该可以做你的工作.. !! ，

jQuery(document).ready(function() {
    jQuery(".slider").hover(function(e) {

        jQuery(this).animate({
            left: "0"
        }, 700)
    }, function() {

        //  e.preventDefault();
        //slide out when options are selected.
        $("select").change(function() {

            //Call this  line only when the work is completed in the  form.
            jQuery(".slider").stop(true, false).animate({
                left: "-270px"
            }, 700);

        }); //change
    }); //hover
}); //ready

Answer 2

这似乎是预期的行为，我看到了一些选择。

1）使用jQuery plugin交换select元素以获取使用div / ul / li元素的下拉列表。这不应该触发mouseleave事件，因为它将这些元素视为框的一部分。（出于某些原因，选择框选项不会发生这种情况）

2）这可能比较hacky，但如果鼠标坐标在框内，你可以检查mouseleave，如果是，don't hide the box，否则hide the box。

3）使用关闭按钮或文档上的单击处理程序，而不是隐藏在mouseleave上。

Answer 3

jQuery(document).ready(function() {
    jQuery(".slider").hover(function() {
        jQuery(this).animate({
            left: "0"
        }, 700)
    }, function(e) {
        var within = $(e.target).parents().is('.slider')
        if (!within) {
            jQuery(".slider").stop(true, false).animate({
                left: "-270px"
            }, 700);
        }
    });
});

的 Working sample 的

jQuery动画div和选择选项

3 个答案: