включить функцию в зависимости от ширины окна и изменения размера окна

У меня есть функция, которую я хочу включить в зависимости от ширины моего окна, чтобы настроить меню для мобильных устройств и окон ipad... она работает нормально, но когда я изменяю размер окна, функция больше не запускается. позвольте мне объяснить, вот мой код функции:

if ($(window).width() < 960) {
    $('.button_menu').css("display", "block");
   $('#bloc_menu').hide();
    $('.button_menu').click(function() {     
          $(this).next().slideToggle();
          return false;
    });

}

else {

    $('#bloc_menu').css("display", "block");
    $('.button_menu').css("display", "none");
}

если ширина окна меньше 960, то у меня меню скрыто, у меня появляется кнопка, при нажатии на кнопку появляется меню.

а если у меня окно больше 960, то кнопка скрыта, а отображается мое меню.

У меня также есть некоторые правила css:

#menu{list-style: none;}
.button_menu{display: none}

@media (max-width: 960px) {
#bloc_menu{margin-top: 10px;position: relative;border-top: 1px solid lightgrey;}

Я просто хочу добавить прослушиватель изменения размера окна, но я не могу найти решение для этого, может ли кто-нибудь помочь мне с этим?

большое спасибо за твою помощь,


jquery css listener window-resize width
person mmdwc    schedule 14.03.2014    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Чтобы он не скрывался после того, как вы его открыли, используйте флаг и переключайте его при нажатии на кнопку:

  var flag = 0;

  $('.button_menu').click(function() {     
          $(this).next().slideToggle();
          if(flag==0){ 
          flag=1;
          } else {
          flag=0;
          }
          return false;
    });

  $( window ).resize(function() {
    if ($(window).width() < 960) {
    $('.button_menu').css("display", "block");
    if(flag==0){
    $('#bloc_menu').hide();
    }
  }else{
    $('#bloc_menu').css("display", "block");
    $('.button_menu').css("display", "none");
  }
});
person RMSTOKES    schedule 14.03.2014
comment
спасибо за ваш ответ, но я попробовал ваш код, и он не работает... вот ajsfiddle, чтобы увидеть его в действии, изображение кнопки не отображается, потому что я работаю локально: jsfiddle.net/R46rN еще раз спасибо за вашу помощь - person mmdwc; 14.03.2014
comment
спасибо, я добавил '.off' в $('.button_menu').off().click(function(), и он отлично работает, большое спасибо, jsfiddle.net/R46rN/4 - person mmdwc; 15.03.2014
comment
Пожалуйста, я предлагаю вам переместить функцию клика из функции изменения размера jsfiddle.net/R46rN/5 - его там не должно быть. Я также обновил код выше. - person RMSTOKES; 15.03.2014

arrow_upward
1
arrow_downward

Вам нужно использовать функцию изменения размера jquery:

$( window ).resize(function() {


your code...
});

Это будет запускать ваш код каждый раз при изменении размера окна.

person RMSTOKES    schedule 14.03.2014
comment
спасибо @RMSTOKES, хорошо, это работает, я нашел решение, но при добавлении изменения размера (функции), при нажатии на мою кнопку, мое меню отображается и скрывается примерно 3 или 4 раза, прежде чем отображаться правильно ... знаете, почему ? - person mmdwc; 14.03.2014

arrow_upward
0
arrow_downward 

$( window ).resize(function() {

    if($(window).width() < 960) {
        $('.button_menu').css("display", "block");
        $('#bloc_menu').hide();
        $('.button_menu').off().click(function() {     
              $(this).next().slideToggle();
              return false;
        });
    }else{
        $('#bloc_menu').css("display", "block");
        $('.button_menu').css("display", "none");
    }
});

Функцию изменения размера можно вызывать несколько раз, поэтому она может добавить к вашей кнопке множество прослушивателей событий щелчка. Как только вы нажмете, он запустит их все.

Поместите функцию off() прямо перед добавлением прослушивателя событий.

person ordepim    schedule 14.03.2014
comment
спасибо @ordepim, все работает, еще один вопрос, можно ли оставить #bloc_menu открытым при изменении размера? Я имею в виду, когда размер моего окна меньше 960 и я нажимаю на .button_menu, появляется mt #bloc_menu, но если я затем изменяю размер, оно исчезает... понимаете, что я имею в виду? спасибо - person mmdwc; 14.03.2014
comment
Да... попробуйте так: $(window).resize(function() { if($(window).width() ‹ 960) { $('.button_menu').css(display, block); if(! $('#bloc_menu').hasClass(onMobile))$('#bloc_menu').hide(); $('.button_menu').off().click(function() { $(this).next( ).slideToggle().addClass(onMobile); return false; }); }else{ $('#bloc_menu').css(display, block).removeClass(onMobile); $('.button_menu').css( дисплей, нет); } }); - person ordepim; 15.03.2014