屏幕尺寸 < 1200 时切换下拉菜单

Question

我写了这样的函数，它在宽度> 1200的屏幕上具有悬停效果并显示菜单

$(window).resize(function(){
    var width = $(window).innerWidth();
    dropDown(width);
});

var dropDown = function(width){
    if(width > 1200){
        $(".dropdown").hover(function() {
                $('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
                $(this).toggleClass('open');
                $('b', this).toggleClass("caret caret-up");
            }, function() {
                $('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
                $(this).toggleClass('open');
                $('b', this).toggleClass("caret caret-up");
            }
        );
    }
};

问题是当我在移动尺寸上刷新页面时 - 一切看起来都很好，但是然后改变窗口大小 > 1200px 然后改变窗口大小

我的html

<li class="dropdown">
    <a href="" class="dropdown-toggle" data-toggle="dropdown">DROPDOWN <b class="caret"></b></a>
      <ul class="dropdown-menu">
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
      </ul>
</li>

Answer 1

当窗口宽度小于 1200 时，您还没有删除悬停处理程序，因此事件处理程序仍然存在并且可以工作。下面if 语句的else 部分将为您解决这个问题...

var openDropDown = function(el) {
    var $el = $(el);
    $('.dropdown-menu', $el).stop( true, true ).fadeIn("fast");
    $el.toggleClass('open');
    $('b', $el).toggleClass("caret caret-up");
};
var closeDropDown = function(el) {
    var $el = $(el);
    $('.dropdown-menu', $el).stop( true, true ).fadeOut("fast");
    $el.toggleClass('open');
    $('b', $el).toggleClass("caret caret-up");
};

var dropDown = function(width){
    if(width > 1200){
        $(".dropdown")
            .off("click")
            .hover(function() {
                openDropDown(this);
            }, function() {
                closeDropDown(this);
            });
    }
    else {
        $(".dropdown")
            .off("mouseenter mouseleave")
            .on("click", function() {
                if ($(this).hasClass("open")) {
                    closeDropDown(this);
                }
                else {
                    openDropDown(this);
                }
            });
    }
};

我还将打开和关闭下拉列表的代码移到单独的函数中，以便可以重复使用。然后，我添加了一个单击处理程序，以便在窗口宽度