JQuery на WordPress не работает последовательно - PullRequest
Новая
       27

JQuery на WordPress не работает последовательно

1 голос
/ 24 мая 2019

На моем сайте WP у меня есть div с текущим пунктом меню .side-nav-left и еще один ниже с другими пунктами меню #sidebar-fixed.

Затем экран опускается ниже 755, показанный ниже div исчезает, а .side-nav-left становится кнопкой для переключения нижеприведенного div.

Я поместил его перед головой в настройках темы. 

<script>

jQuery(document).ready(function($) {

    $(window).on("resize", function (e) {
        checkScreenSize();
    });

    checkScreenSize();

    function checkScreenSize(){
        var newWindowWidth = $(window).width();
        if (newWindowWidth < 755) {
        $('#sidebar-fixed').hide();
          $('.side-nav-left').on('click', function(){
          $('#sidebar-fixed').toggle();
            })
        }
        else
        {
        $('#sidebar-fixed').show();
        $('.side-nav-left').off();

        }
    }
});

</script>

Div #sidebar-fixed отображается или скрывается корректно при изменении размера экрана.

Проблема в кнопке .side-nav-left, которая иногда работает, иногда нет. Например, у меня есть аккордеон на странице из плагина. Если я изменю размер экрана ниже 755, кнопка не работает. Если я открою аккордеон и попробую еще раз мой переключатель, то это сработает. Затем, если я снова нажму на аккордеон, он перестанет работать.

Или иногда я изменяю размер экрана ниже 755, и он работает, затем снова изменяю размер выше 755 и ниже, и он перестает работать.

Я пытаюсь понять, в чем причина, когда она не работает. Это потому, что jQuery не загружен? Это конфликт с другими jQuery на сайте? Или что это может быть?

1 Ответ

1 голос
/ 24 мая 2019

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

Самый простой подход состоит в том, чтобы удалить любого присутствующего слушателя перед подключением: 

$('.side-nav-left').off().on('click', function() {
  $('#sidebar-fixed').toggle();
});

Вы также можете добавить флаг, который немного более эффективен, хотя практически это, вероятно, будет иметь значение только для разработчиков, изменяющих размер своего браузера: 

jQuery(function($) {

var listen;

$(window).resize(checkScreenSize);

checkScreenSize();

function checkScreenSize() {

  var newWindowWidth = $(window).width();

  if (newWindowWidth < 755) {
    if (!listen) {
      listen = true;
      $('#sidebar-fixed').hide();
      $('.side-nav-left').off().on('click', function() {
        $('#sidebar-fixed').toggle();
      });
    }
  }
  else {
    $('#sidebar-fixed').show();
    $('.side-nav-left').off();
    listen = false;
  }
}
});
...