logo标签列表

Bootstrap 5：单击锚链接后关闭 offcanvas 菜单。

htmlbootstrap-5
3

这是关于使用Bootstrap 5创建的一个项目。问题在于当用户点击锚链接时，侧边栏菜单保持打开状态。为了在点击后关闭菜单，我使用以下代码作为onclick事件：

function close_offcanvas() {
            var element1 = document.getElementById("eff_nav_toggler");
            element1.classList.remove("collapsed");
            var element2 = document.getElementById("navbarSupportedContent");
            element2.classList.remove("show");
            document.getElementById("eff_nav_toggler").setAttribute('aria-expanded', 'false');
}

以下是HTML代码：

<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top eff-main-navbar">
    <div class="container-fluid">
        <a class="navbar-brand" href="<?php echo ROOT_DIR ; ?>/index.php">
            <img src="<?php echo ROOT_DIR ; ?>/assets/images/logo/logo-klein_170.jpg" alt="Logo" title="Logo">
        </a>
        <button 
            id="eff_nav_toggler"
            class="navbar-toggler"  
            type="button" 
            data-bs-toggle="collapse"  
            data-bs-target="#navbarSupportedContent"   
            aria-controls="navbarSupportedContent"  
            aria-expanded="false"  
            aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mx-auto mb-2 mb-lg-0 w-100 ps-5">
                <li class="nav-item d-flex align-items-center"><a class="nav-link" href="<?php echo ROOT_DIR ; ?>/index.php#link1" onclick="close_offcanvas()">Link 1</a></li>
                <li class="nav-item d-flex align-items-center"><a class="nav-link" href="<?php echo ROOT_DIR ; ?>/index.php#link2" onclick="close_offcanvas()">Link 2</a></li>
            </ul>
        </div>
    </div>
</nav>


It is working fine. But I am not sure if this is the best solution. Any other ideas?

Thank you
2个回答
0
你可以通过使用一些JavaScript来实现，为每个链接添加点击事件并调用隐藏方法。我还添加了一个最小宽度的检查，以便在桌面浏览器上保持打开状态。
document.querySelectorAll('.menuitem').forEach(item => {
item.addEventListener('click', () => {
    // Check if the viewport width is less than 450px
    if (window.innerWidth < 450) {
        // Close the offcanvas menu
        var bsOffcanvas = bootstrap.Offcanvas.getInstance(document.getElementById('offcanvasMenu'));
        bsOffcanvas.hide();
    }
});

});

-1
不需要做复杂的事情。Bootstrap有一个称为“属性”的属性。
data-bs-dismiss="offcanvas"

请将以下属性添加到您的锚点标签或li标签中。点击后，它将关闭侧边栏。
4
这还需要 data-bs-target，在我的情况下，它会在跟随链接之前关闭菜单，使其在所描述的场景中无用。 - MarcGuay
2
我曾经做过的唯一一次踩踏。这太错了。确实存在data-bs-dismiss。它确切地导致锚点标签改变行为，这完全违背了OP的意图，并可能会让没有Web调试经验的人感到困惑。在我看来，你应该用红色字母编辑它，表示“错误”。 - Jay Day Zee
这个问题不应该被标记为已回答，因为答案是错误的。 - Paloha
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接