javascript - jQuery window.width 'if' 'else if' 'else' 语句不工作

Question

function changeDrop() {
 var windowSize = $(window).width();

    if (windowSize > 450) {

              $('.menu-361').hover(
      function() {
            $('.menu-361 ul').show();
      },

      function() {
            $('.menu-361 ul').hide();
      });

        console.log("screen width is greater than 450px");

    }
    else if (windowSize <= 450) {

        $('.menu-361').on('hover', function () {
           //mousehover
         } , function(){
           //mouseout
         } );


        $('#dropbutton').click(function() {
        $('.menu-361 ul').toggle();
        $('#dropbutton p').toggle();
        });

        console.log("screen width is less than 450px");
    }

    else {}

 }

  changeDrop();
  $(window).resize(changeDrop);

在 if 语句为真之后，我认为代码位被加载到内存中。当 window.width <= 450 时，来自 if 语句或 > 450 的代码仍然运行。知道如何进行这项工作吗？

http://tidalbania.com/tidnew/

演示中的链接在真实站点上!

如果您需要 fiddle ，我可以更新问题。

Answer 1

正如其他人所提到的，您不应该在每次更改时都绑定(bind)事件处理程序。这应该足够了:

$('.menu-361').hover(hoverInOut);

$('#dropbutton').click(function() {
    $('.menu-361 ul').toggle();
    $('#dropbutton p').toggle();
});

function hoverInOut(event) {
    var windowSize = $(window).width();
    if (windowSize > 450) {
        if(event.type == "mouseenter")
            $('.menu-361 ul').show();
        else
            $('.menu-361 ul').hide();
    }
}