0

我有以下代码来切换垂直下拉菜单。当我在 'ul > li > a' 中多次执行 mouseenter 并在选择 de 子菜单并进入其中后，会出现问题，第二个触发器会多次触发。

$('nav > ul > li > a').on('mouseenter',function(e){
    var currentID = this;
    var index = $('ul.topnav > li > a').index(this);
    $(this).addClass('selected');
    $('nav ul ul').css('margin-top',(38*parseInt(index)));

    $(this).parent().find('ul').on('mouseenter',function(e){
        //fire several times
        console.log('hover');           
        $(currentID).addClass('selected');
    }).on('mouseleave',function(e){
        $(currentID).removeClass('selected');
        //fire several times
        console.log('end hover');
    });

}).on('mouseleave',function(e){
    $(this).removeClass('selected');
);
4

2 回答 2

2

每次mouseenter执行外部回调时，它都会将新的附加事件处理程序附加到ul（这将与先前附加的处理程序执行相同的操作。

当鼠标然后进入时ul，所有附加的事件处理程序都会被调用。

您应该只附加一次事件处理程序，而不是每个mouseenter.

于 2013-05-14T21:22:45.557 回答
1

每次悬停时，您都将事件绑定到 this 的子元素nav > ul > li > a。

尝试这个：

$('nav > ul > li > a').each(function(e){

    $(this).on('mouseenter',function(e){
        var index = $('ul.topnav > li > a').index(this);
        $(this).addClass('selected');
        $('nav ul ul').css('margin-top',(38*parseInt(index)));
    }).on('mouseleave',function(e){
        $(this).removeClass('selected');
    );

    var currentID = this;

    $(this).parent().find('ul').on('mouseenter',function(e){
        //fire several times
        console.log('hover');           
        $(currentID).addClass('selected');
    }).on('mouseleave',function(e){
        $(currentID).removeClass('selected');
        //fire several times
        console.log('end hover');
    });

});
于 2013-05-14T21:23:11.840 回答