0

遅延のある関数を作ろうとしています。段落をクリックすると、この段落の前にMENUが追加されます。しかし、いつでも、または遅れてメニューを非表示にする必要があります。mouseleavemouseout

例を次に示します: http://jsfiddle.net/yinternet/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();
4

1 に答える 1

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);        
});

</p>

于 2012-10-07T21:49:31.340 に答える