Раскрывающееся меню не открывается при нажатии - PullRequest
0 голосов
/ 04 мая 2020

Раскрывающееся меню внутри панели навигации не открывается при нажатии. Вот HTML часть:

image

А вот код javascript:

$('.navbar-collapse a').click(function() {
});
$('.navbar-collapse a').click(function() {
});

Ссылка JSFiddle: https://jsfiddle.net/n2jq7uLx/

Я хочу, чтобы моя навигационная панель закрывалась после выбора ссылки, но она не работает в выпадающем меню внутри навигационной панели. Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 04 мая 2020

Защита раскрывающегося меню реализована в виде html элемента привязки (a). В коде инициализатора присоединен тот же обработчик, что и для конечных якорей, которые реализуют фактическую навигацию.

Решение:
Не присоединяйте обработчик к этому элементу.

Кодирование: у связанного скрипта есть несколько проблем:

  • Не включает jQuery, в то время как jQuery используется
  • В обработчиках используется метод .collapse, который не определен.
  • Использование .hide (которое, вероятно, и было задумано) здесь не работает, поскольку элемент .navbar-collapse, для которого css необходимо изменить, имеет значение свойства display, помеченное !important в его css переопределение настроек, созданных обработчиком кликов.
  • (Обработчик кликов может быть установлен в неправильный момент времени, поскольку он не синхронизирован явно c 'с деревом dom создание (хотя я не проверял это и больше не исследовал это, но обернул назначения обработчиков методом jquery .ready))

В приведенном ниже коде используется более конкретный c css селектор он управляет назначением свойства display: flex!important css на панель навигации и отфильтровывает защиту раскрывающегося меню от элементов, с которыми зарегистрирован обработчик. Элемент, который должен быть скрыт, находится в восходящем обходе, начиная с элемента, получающего элемент, что может быть немного более эффективным, чем его запрос по классу css (хотя без тестов).

$(document).ready(() => {
    $('.navbar-expand-sm .navbar-collapse a').not(".dropdown-toggle").click(function(eve) {
       $(eve.target).closest(".navbar-expand-sm .navbar-collapse").css('visibility', 'hidden');
    });
});
image
0 голосов
/ 05 мая 2020

Наконец-то получил правильный код:

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
      $(".navbar-collapse").collapse('hide');
    });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...