使用数据切换关闭导航栏= 单击"offcanvas"不起作用

Question

我有一个侧面导航，在小型设备上可以从左侧很好地切换。一切都很完美，除了单击侧边栏中的链接;我不想使用导航栏来隐藏和显示内容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。

Answer 1

您需要实现一个在单击内容时关闭侧边菜单的功能。当前代码仅在单击菜单按钮时切换侧边菜单，但在单击菜单内容时不切换侧边菜单。

编辑：由于您使用的是jQuery。您需要一个额外的功能(不是必需的，但会更简单(，它应该如下所示：

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

或

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

基本上，我们选择div 元素的类，将其设置为单击事件处理程序，并为其提供如何处理它的函数。在这种情况下，该功能正在切换侧边栏，就像菜单(汉堡包(按钮一样。

我假设这应该有效，没有测试过。