Jquery slideToggle несколько раз «подпрыгивает» при изменении размера - PullRequest
Новая
       5

Jquery slideToggle несколько раз «подпрыгивает» при изменении размера

0 голосов
/ 14 ноября 2018

У меня небольшая проблема с простым скриптом jQuery (я не эксперт):

Мои требования:

1) У меня есть несколько элементов, которые сделаны из - Заголовок - кузов

2) Для размера экрана> 768 пикселей все элементы видимы

3) Для размера экрана = <768px я хочу эмулировать поведение «Свернуть Bootstrap», поэтому при нажатии на заголовок «тело» элемента, т.е. <code><div class="panel--collapsible" id="panel1"> становится видимым. Тело элемента по умолчанию не отображается в начале.

Я публикую здесь код, который я написал до сих пор 

$(document).ready(function() {
  toggleDivOnMobile();
  window.addEventListener('resize', function() {

    toggleDivOnMobile();
  });

});

function toggleDivOnMobile() {
  $('.par-title--collapsible').click(function(e) {
    e.preventDefault();
    var currentAttrValue = $(this).attr('href');
    var content = $(currentAttrValue);
    if (window.outerWidth <= 768) {
      content.slideToggle("slow");     
    }
  });
  return false;
}
.panel--collapsible {
  display: none;
}

@media screen and (min-width:769px) {
  .panel--collapsible {
    display: block!important;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="par1" class="collapsible">
  <h2><a href="#panel1" class="par-title--collapsible">Title 1</a></h2>
  <div class="panel--collapsible" id="panel1">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

<div id="par2" class="collapsible">
  <h2><a href="#panel2" class="par-title--collapsible">Title 2</a></h2>
  <div class="panel--collapsible" id="panel2">
    <p>Cuius et cetera</p>
  </div>
</div>

Моя проблема: после изменения размера окна происходит сбой, но оно несколько раз «отскакивает».

Вы можете смоделировать поведение, изменив размер окна.

Спасибо за вашу помощь, конечно, если вам нужна дополнительная информация, напишите мне комментарий:)

1 Ответ

0 голосов
/ 14 ноября 2018

Проблема в том, что вы звоните toggleDivOnMobile, который вызывается при каждом изменении размера окна.Присоединяя ваши обработчики событий внутри этой функции, вы в конечном итоге получаете несколько обработчиков событий, которые пытаются сделать одно и то же, и они начинают бороться друг с другом.

Решением будет установка некоторой внешней переменной и толькоподключите слушателей событий один раз, например, так: 

var isMobile = false;

$(document).ready(function() {
  toggleDivOnMobile();
  handleWindowResize();

  window.addEventListener('resize', function() {
       handleWindowResize();
  });
});

function handleWindowResize() {
    isMobile = window.outerWidth <= 768;
}

function toggleDivOnMobile() {
  $('.par-title--collapsible').click(function(e) {
    e.preventDefault();
    var currentAttrValue = $(this).attr('href');
    var content = $(currentAttrValue);
    if (isMobile) {
      content.slideToggle("slow");     
    }
  });
  return false;
}

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

РЕДАКТИРОВАТЬ

Вы также можете разместить проверку isMobile во внешней функции и вызвать ее при загрузке страницы;мобильный браузер (или любой другой браузер на самом деле) не будет инициировать событие изменения размера, если браузер фактически не изменен.

РЕДАКТИРОВАТЬ 2

Обновлен код для запроса OP ввключить вызов изменения размера при загрузке.

...