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元素的类，将其设置为click事件处理程序并为其提供一个函数如何处理它。在这种情况下，该功能是切换侧边栏，如菜单（汉堡包）按钮是。

我认为这应该有用，没有经过测试。

关闭导航栏，数据切换=＆＃34; offcanvas＆＃34;点击不起作用

1 个答案: