提问者:小点点

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


我有一个侧导航,在小型设备上可以很好地从左侧切换。除了点击侧边栏中的链接外,一切都很完美;我不想让导航栏隐藏和显示contentdiv,但是它被卡住了,你必须点击切换按钮来移除侧边栏。我应该怎么做才能使导航栏在单击时消失而不使用“折叠”?

按钮

<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个答案

匿名用户

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

编辑:因为你使用的是jQuery。你需要一个额外的功能(不需要,但会更简单),它应该看起来像下面这样:

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

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

基本上,我们选择div元素的类,将其设置为click事件处理程序,并给它一个函数来处理它。在这种情况下,功能是切换边栏式菜单(汉堡)按钮。

我假设这应该是可行的,但没有测试过。