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);

After the if statment is true the bit of code is loaded in the memory i think. And when the window.width is <= 450 the code from the if statment or > 450 still runs. Any idea how to make this work?

http://tidalbania.com/tidnew/

The link in witch the demo is on the real site!

If you need a fiddle i can update the question.

Answer 1

Well for starters, your code is essentially if A, else if not A, else which is redundant. Just if A, else is fine.

That aside, you are attaching a new event handler for every single time your code runs. That's a lot of event handlers! You are also never detaching your handlers, instead trying to re-add blank ones.

Take a moment to learn how event handlers work ^_^

Answer 2

As others have mentioned, you should not bind event handlers on every change. This should suffice:

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

I think i fixed the issue adding the unbind ('mouseenter mouseleave') when width is less than 450px by removing the binded hover function.

Is this the way it should be done?