Question

我正在尝试延迟功能。当我点击某个段落时， MENU 会被添加到此段落之前。但我需要在mouseleave或mouseout延迟时隐藏 MENU 。

以下是一个示例：http://jsfiddle.net/ynternet/bZLAv/

HTML

<p class="add_to_this1">Click here 1</p>
<p class="add_to_this2">Click here 2</p>
<p class="add_to_this3">Click here 3</p>

<div id="menu"> I'm here</div>

的jQuery

jQuery.fn.handler = function () {
    $(this).on({
        click: function(e) {
            if ($(this).find("#menu").length) {
                return;
            }
            $('#menu').prependTo($(this));
            $("#menu").css({
                position: "absolute",
                left: "100px"
            }).show();
        }
    });
}
$(".add_to_this1").handler();
$(".add_to_this2").handler();
$(".add_to_this3").handler();

Answer 1

这是一个jsFiddle示例

jQuery.fn.handler = function () {
    $(this).on({
        click: function(e) {
            if ($(this).find("#menu").length) {
                return;
            }

            $('#menu').prependTo($(this));

            $("#menu").css({
                position: "absolute",
                left: "100px"
            }).show();
        }
    });
}
$(".add_to_this1").handler();
$(".add_to_this2").handler();
$(".add_to_this3").handler();

$('p[class^=add_to_this]').on('mouseleave', function(e) {
    setTimeout(function() {
        $('#menu').hide();
    }, 2000);        
});

如何在mouseout / mouseleave上删除延迟div？

1 个答案: