单击时使用 data-toggle="offcanvas" 关闭导航栏不起作用

Posted 2023-04-13

【中文标题】单击时使用 data-toggle="offcanvas" 关闭导航栏不起作用

【英文标题】：Close navbar with data-toggle="offcanvas" on click doesn't work

【发布时间】：2018-10-12 23:56:27

【问题描述】：

我有一个侧面导航，可以在小型设备上很好地从左侧切换。一切正常，除非您单击侧边栏中的链接；我不想让导航栏隐藏和显示内容 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。

【问题讨论】：

Bootstrap 3 collapsed menu doesn't close on click的可能重复

【参考方案1】：

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

编辑：因为您使用的是 jQuery。你需要一个额外的函数（不是必需的，但会更简单），它应该如下所示：

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

或

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

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

我假设这应该可行，尚未测试。

【讨论】：

我该如何以最好的方式做到这一点，以免它与 Bootstrap 发生冲突？