引导5:单击锚链接后关闭离开画布菜单

Question

它是关于一个用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

Answer 1

不需要做那些艰难的事情。引导程序有属性调用

data-bs-dismiss="offcanvas"

将此属性添加到锚标记或li标记中。它将按一下关闭离开画布。