Блог

Главная - Вопросы по программированию - jQuery отключить slideToggle в разрешении рабочего стола

jQuery отключить slideToggle в разрешении рабочего стола

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть боковая панель с 3 разделами:

  • В мобильных разрешениях эти разделы выглядят как вкладки аккордеона, при этом виден только заголовок, нажатие на привязку внутри элемента заголовка запускает slideToggle, который показывает / скрывает остальное содержимое в этом разделе. Это работает.
  • В разрешениях рабочего стола всегда видны 3 раздела и все их содержимое, поэтому в основном нажатие на заголовок ничего не должно делать. Когда я загружаю / обновляю страницу в разрешении рабочего стола, щелчок по элементу привязки заголовка ничего не делает (и это здорово), но если я переключусь на мобильное разрешение, а затем снова переключусь на разрешение рабочего стола, то щелчок по элементу привязки заголовка переключит содержимое, поэтому, пожалуйста, дайте мне знать, как это остановитьЭффект slideToggle на рабочем столе.

Код jQuery:

 $(window).on('load resize', function(){     

   if ($('#page-content').width() < 991 ) {

        $('#primary-sidebar header > a').click(function(e) {
            e.preventDefault();
            $(this).parent('header').siblings('.widget').slideToggle();
        });
   } else if ($('#page-content').width() > 992 ) {

        $('#primary-sidebar header > a').click(function(e) {
            return false;
        });
   }
});

Спасибо!!!

Комментарии:

1. Вы пробовали e.preventDefault(); вместо возврата false на рабочем столе?

2. Да, я реализовал e.preventDefault() Также пробовал e.stopPropagation(), к сожалению, не работает.

3. Во-первых, этот код настолько неоптимизирован. При каждом изменении размера окна будет добавлен новый обработчик событий, его может быть намного больше, чем 1.. Вам нужен чистый обработчик щелчков, прежде чем добавлять его с помощью $('#primary-sidebar header > a').unbind('click')

4. Спасибо Максу. Это работает.

Ответ №1:

Хотя отмена привязки события щелчка сработала, $(window).on('load resize', function(){ это создавало проблемы при изменении размера окна, эффект slideToggle запускался несколько раз одним щелчком мыши. Нет необходимости изменять размер окна / загружать строку кода. Ниже приведен код, который отлично работает для меня.

  $('#primary-sidebar header > a').on('click', function(e) {
    e.preventDefault();

    var width = $('#page-content').width();

    if (width <= 991) {
        $(this).parent('header').siblings('.widget').slideToggle();
        $(this).find('.fa.fa-chevron-left').toggleClass('fa-chevron-down');
    } 
});