2

我查看了一些类似的帖子，但没有找到我正在寻找的解决方案。我试图div#dropdownmenu只追加一次。但是，当我将鼠标悬停在 div 上时，它继续发生。任何帮助将不胜感激。

$(function () {
    if ($('div#dropmenu').length == 0) {
        $('#site_nav > ul > a').live('mouseenter', function () {
            $(this).append("<div></div>");
            $('#site_nav > ul > li a div').attr('id', 'dropmenu');
            $('div#dropmenu').html("<ul></ul>");
            $('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>");
        });
    } else {
        $('#site_nav > ul > li > a').append("");
    }
});
4

3 回答 3

1

您可以在执行后删除函数处理程序。我给匿名函数起了一个名字以便于参考。

$(function () {
    if ($('div#dropmenu').length == 0) {
        $('#site_nav > ul > a').live('mouseenter', function f() {
            $(this).append("<div></div>");
            $('#site_nav > ul > li a div').attr('id', 'dropmenu');
            $('div#dropmenu').html("<ul></ul>");
            $('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>");
            $(this).die('mouseenter', f);
        });
    } else {
        $('#site_nav > ul > li > a').append("");
    }
});

http://api.jquery.com/die/

于 2013-04-03T15:18:37.703 回答
0

您还可以使用.one()jQuery 方法来确保事件处理程序只执行一次。

$(function () {
    if ($('div#dropmenu').length == 0) {
        $('#site_nav > ul > a').one('mouseenter', function () {
            $(this).append("<div></div>");
            $('#site_nav > ul > li a div').attr('id', 'dropmenu');
            $('div#dropmenu').html("<ul></ul>");
            $('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>");
        });
    } else {
        $('#site_nav > ul > li > a').append("");
    }
});

http://api.jquery.com/one/

于 2013-04-03T15:21:08.917 回答
0

您在附加事件侦听器之前进行检查$('div#dropmenu').length == 0)，之后，侦听器已附加并将始终执行。您可以在事件侦听器中移动检查。

$(function () {
    $('#site_nav > ul > a').live('mouseenter', function () {
        if ($('div#dropmenu').length == 0) {
            $(this).append("<div></div>");
            $('#site_nav > ul > li a div').attr('id', 'dropmenu');
            $('div#dropmenu').html("<ul></ul>");
            $('div#dropmenu ul').html("<li><a>Mission</a></li><li><a>Story</a></li><li><a>Quality</a></li><li><a>Pledge</a></li><li><a>Bio</a></li>");
        } else {
            $('#site_nav > ul > li > a').append("");
        }
    });
});
于 2013-04-03T15:25:04.243 回答