jQuery window.width 'if' 'else if' 'else' Статут не работает

Question

jQuery window.width 'if' 'else if' 'else' Статут не работает

0

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/

Ссылка в демо-версии на реальном сайте!

Если вам нужна скрипка, я могу обновить вопрос.

Alen Saqe 14 март 2014, в 19:52

Источник

1

В чем проблема, хотя? Вы этого не говорите.
robbclarke 14 март 2014, в 18:54
1

Если вы вызываете changeDrop() для изменения размера окна, вам нужно отменить привязку предыдущих обработчиков или лучше установить обработчик за пределами любого другого обработчика (кроме, возможно, готового) и фильтровать ширину вдовы внутри него. Кстати, ваше последнее заявление еще никогда не может быть достигнуто здесь
A. Wolff 14 март 2014, в 18:56
0

Идея заключается в том, что когда окна браузера меньше 450px, функция hover по-прежнему срабатывает, когда страница загружается со скоростью менее 450px, но не выходит, а после того, как она выходит за пределы 450px и возвращается, она продолжает работать ..! Если бы я был чист!
Alen Saqe 14 март 2014, в 18:56
1

Когда вы связываете обработчик событий, он не удаляется волшебным образом. Вместо этого проверьте ширину окна внутри обработчика событий.
adeneo 14 март 2014, в 18:57
1

@AlenSaqe, так что смотрите мой предыдущий комментарий, не вкладывайте обработчики, фильтруйте ширину внутри обработчиков click / hover
A. Wolff 14 март 2014, в 18:57
0

@A.WolffA.Wolff я пытаюсь сделать это на основе вашего комментария :))
Alen Saqe 14 март 2014, в 19:02

Показать ещё 4 комментария

Теги:

javascript

jquery

html

css

3 ответа

2

Ну для начала, ваш код по существу, if A, else if not A, else это лишнее. Просто, if A, else все в порядке.

В остальном вы добавляете новый обработчик событий за каждый раз, когда ваш код работает. Это много обработчиков событий! Вы также никогда не отсоединяете своих обработчиков, вместо этого пытаетесь повторно добавить пустые.

Найдите минутку, чтобы узнать, как работают обработчики событий ^ _ ^

Niet the Dark Absol 14 март 2014, в 17:02

0

Я просто использовал if и else ранее, но я пробовал это с разными значениями ширины, поэтому else, если есть положение, а else пусто. Забыл прояснить это. Я постараюсь заставить его работать на основе ваших комментариев.
Alen Saqe 14 март 2014, в 18:59

1

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

Я думаю, что я исправил проблему с добавлением unbind ("mouseenter mouseleave"), когда ширина меньше 450 пикселей, удалив функцию привязанного привязки.

Так ли это должно быть сделано?

Alen Saqe 14 март 2014, в 17:18

Ещё вопросы

В чем проблема, хотя? Вы этого не говорите.
Если вы вызываете changeDrop() для изменения размера окна, вам нужно отменить привязку предыдущих обработчиков или лучше установить обработчик за пределами любого другого обработчика (кроме, возможно, готового) и фильтровать ширину вдовы внутри него. Кстати, ваше последнее заявление еще никогда не может быть достигнуто здесь
Идея заключается в том, что когда окна браузера меньше 450px, функция hover по-прежнему срабатывает, когда страница загружается со скоростью менее 450px, но не выходит, а после того, как она выходит за пределы 450px и возвращается, она продолжает работать ..! Если бы я был чист!
Когда вы связываете обработчик событий, он не удаляется волшебным образом. Вместо этого проверьте ширину окна внутри обработчика событий.
@AlenSaqe, так что смотрите мой предыдущий комментарий, не вкладывайте обработчики, фильтруйте ширину внутри обработчиков click / hover
@A.WolffA.Wolff я пытаюсь сделать это на основе вашего комментария :))
Я просто использовал if и else ранее, но я пробовал это с разными значениями ширины, поэтому else, если есть положение, а else пусто. Забыл прояснить это. Я постараюсь заставить его работать на основе ваших комментариев.

Ketola · Accepted Answer · 2014-03-14T17-10-00.000Z

Как отмечали другие, вы не должны привязывать обработчики событий при каждом изменении. Этого должно быть достаточно:

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

Да, спасибо за код. Я читал комментарии и пытался заставить его работать, я не эксперт в jQuery tho. Слава тебе
Рад слышать, что это работает для вас сейчас. Обратите внимание, что #dropbutton может выйти из синхронизации, если открыть меню, изменить размер экрана и затем .menu-361 . Изменение размера окна вниз приведет к неправильному состоянию кнопки. Я считал, что это небольшая проблема, поэтому я не обработал сброс кнопки в hoverInOut()
да, это может быть проблемой, если кто-то все время играет, я заметил это еще раньше. Мысль его действительно незначительна. Я возьму вызов и попытаюсь решить его сам. Спасибо за заголовки и ответ.