Закрыть панель навигации с data-toggle = "offcanvas" при нажатии не работает - PullRequest
Новая
       6

Закрыть панель навигации с data-toggle = "offcanvas" при нажатии не работает

0 голосов
/ 02 мая 2018

У меня есть боковая навигация, которая прекрасно переключается с левой стороны на небольших устройствах. Все работает отлично, за исключением случаев, когда вы нажимаете на ссылку в боковой панели; Я не хочу, чтобы навигационная панель скрывала и показывала содержимое div, но она застряла, и вы должны нажать кнопку-переключатель, чтобы удалить боковую панель. Что я должен сделать, чтобы навигационная панель исчезла при щелчке без использования свертывания?

Кнопка 

<button type="button" id="sideBtn" class="navbar-toggle leftToggle" data- 
toggle="offcanvas">
    <span class="sr-only">Menu</span>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
 </button>

Это переключает боковую панель JS 

$(document).ready(function() {
'use strict';
var trigger = $('.leftToggle'),
    isClosed = false;

function buttonSwitch() {
    if (isClosed === true) {
        trigger.removeClass('is-open');
        trigger.addClass('is-closed');
        isClosed = false;
        }
    else {
        trigger.removeClass('is-closed');
        trigger.addClass('is-open');
        isClosed = true;
    }
}

trigger.click(function() {
    exFunction(this);
    buttonSwitch();
});

$('[data-toggle="offcanvas"]').click(function () {
    $('#sideNav').toggleClass('toggled');
});
});

Функция exFunction () просто превращает гамбургер в X.

1 Ответ

0 голосов
/ 02 мая 2018

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

Редактировать: так как вы используете jQuery. Для этого вам нужна дополнительная функция (не обязательно, но будет проще), она должна выглядеть примерно так: 

$(".div-element").on("click", function() { 
    $("#sideNav).toggleClass("toggled");
});

или 

$(".bar1").click(function() { 
    $("#sideNav).toggleClass("toggled");
});

В основном мы выбираем класс элемента div, устанавливаем его в обработчик события click и даем ему функцию, что с ним делать. В этом случае функция переключает боковую панель, как кнопка меню (гамбургер).

Я предполагаю, что это должно работать, не проверял.

...