Question

所以我的jQuery代码有问题，当下拉切换有data-toggle ='hover'应该在hovers时显示子菜单，如果这个toggle有data-toggle ='dropdown'应该只显示sub单击菜单。代码似乎工作但是当窗口调整大小并且属性从OFF HOVER更改为DROPDOWN（另一种方式似乎工作得很好）时，悬停函数仍然执行。

这是代码

function main() {
    if (($('a.dropdown-toggle').attr('data-toggle'))=='hover') {
        $('.dropdown').hover(function() {
            $('ul.dropdown-menu', this).stop(true, true).slideDown(100);
            $(this).addClass('open');
          }, function() {
            $('ul.dropdown-menu', this).stop(true, true).slideUp(100);
            $(this).removeClass('open');
          });
       }
      }
      $(document).ready(main);
      $(window).resize(main);

和属性更改功能

function clickEvent() {
    if(viewport().width <= 991) {
        $('a.dropdown-toggle').attr('data-toggle','dropdown');
    } else {
        $('a.dropdown-toggle').attr('data-toggle','hover');
    }
}
$(document).ready(clickEvent);
$(window).resize(clickEvent);

Answer 1

尝试在事件处理程序

中编写阻塞条件

function main() {
    $('.dropdown').hover(function() {
        if ($('a.dropdown-toggle').data('toggle')!=='hover') { return; }
        $('ul.dropdown-menu', this).stop(true, true).slideDown(100);
        $(this).addClass('open');
      }, function() {
        if ($('a.dropdown-toggle').data('toggle')!=='hover') { return; }
        $('ul.dropdown-menu', this).stop(true, true).slideUp(100);
        $(this).removeClass('open');
    });
}

或者更好地在事件绑定中进行一些调整，

//remove the if statement inside of main function and do the below.

function clickEvent() {
    if(viewport().width <= 991) {
        $('.dropdown').unbind('mouseenter mouseleave')
    } else {
        main();
    }
}

Answer 2

或者，您可以更加具体地使用选择器并完全取消if语句。

尝试使用以下选择器：

a.dropdown-toggle[data-toggle="hover"]

$(document).on({
    mouseenter: function() {
        //This function will execute when the dropdown-toggle is set to Hover
        //and the mouse is hovering over the element
        //some code like $(this).slideDown(100)
    },
    mouseleave: function() {
        //And this function will run after the the mouse leaves the selector element
    }
}, 'a.dropdown-toggle[data-toggle="hover"]');

此外，我不确定您要使用调整大小和准备好的功能来完成什么。但你不应该需要它们。

if语句中的jQuery悬停函数

2 个答案: