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是＆lt; = 450时，来自if语句的代码或＆gt; 450仍在运行。知道如何使这项工作吗？

http://tidalbania.com/tidnew/

该演示中的链接位于真实网站上！

如果您需要小提琴，我可以更新问题。

Answer 1

对于初学者来说，您的代码基本上是if A, else if not A, else，这是多余的。只需if A, else即可。

除此之外，您每次都会为附加一个新的事件处理程序运行代码。这是很多事件处理程序！您也永远不会分离您的处理程序，而是尝试重新添加空白处理程序。

花点时间了解事件处理程序的工作原理^ _ ^

Answer 2

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

$('.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();
    }
}

Answer 3

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 {          
        $('.menu-361').unbind('mouseenter mouseleave');

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

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

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

我认为通过删除绑定的悬停功能，我修复了当宽度小于450px时添加unbind（'mouseenter mouseleave'）的问题。

这是应该做的吗？

jQuery window.width＆＃39; if＆＃39; ＆＃39;否则如果＆＃39; ＆＃39;否则＆＃39;声明不起作用

3 个答案: