Не правильно работает slideToggle

@a4t_ech · Регистрация: 10.08.2015

Author24 — интернет-сервис помощи студентам

Есть блок, который в десктопной версии сайта отображается полностью, а в мобильной (480рх и меньше) только заголовок этого блока, а основная часть скрыта. Нужно чтоб при размере экрана меньше 480рх можно было нажать на заголовок и открыть блок.
Сейчас блок открывается и закрывается несколько раз подряд, помогите найти ошибку

Javascript

$(window).on('resize', function(){
        var win = $(this);
        if(win.width() < 481){
            $('.code h4').click(function(){
                $('.code h4').next().slideToggle();
                
            });
        }
    });

@AmateR62 · 08.01.2017, 13:36

Закрывается и открывается несколько раз подряд потому что вы при каждом изменении размера экрана вешаете событие... изменили до 480 будет открываться, до 479 открываться и закрываться и т.д. Как то так...

Попробуйте вот так:

Javascript

(function( $ ) {
  var win = $(this);
  $(window).on('resize', function() {
    $('.code').children("p").css("display", "");
  });
    
  
  $('.code').on("click", "h4", function() {
    if (win.width() < 481) {
      $(this).next().slideToggle();       
    }
  });
  
   
})(jQuery);

Правда не очень красиво будет выглядеть когда размер экрана небольшой, кликнули по заголовку (т.е. раскрыли блок), а потом начали менять размер - блок скроется...

P.S. Непонятно какая у вас разметка и стили

	08.01.2017, 13:36