Bootstrap 5垂直导航：点击无下拉链接时关闭子菜单

我实现了一个Bootstrap 5垂直导航，包含单个链接和两个带下拉子菜单的项。点击不同下拉菜单链接时，已展开的子菜单会自动关闭，这符合预期。但存在问题：点击无下拉子菜单的Link 1、Link 4、Link 5时，无法关闭已展开的子菜单。期望实现：点击这类无下拉的链接时，关闭所有已展开的子菜单，并跳转至链接目标地址。

通过给无下拉的导航链接添加点击事件，手动调用Bootstrap Collapse组件的hide方法关闭所有展开的子菜单即可实现需求，具体步骤如下：

• 给无下拉的.nav-link添加自定义类no-submenu，方便定位目标元素
• 监听这些链接的点击事件，触发时关闭所有处于展开状态的子菜单
• 保留原链接的跳转逻辑，不影响正常页面跳转

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="generator" content="">
    <title>Navigation Test</title>

   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">

  <style type="text/css">
    .sidebar li .submenu{
     list-style: none;
     margin: 0;
     padding: 0;
     padding-left: 1rem;
     padding-right: 1rem;
    }
  </style>
  
<body>
<nav class="sidebar card py-2 mb-4">
    <ul class="nav flex-column" id="accordion">
        <li class="nav-item">
            <a class="nav-link no-submenu" href="#">Link 1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" data-bs-target="#sub_menu_1" href="#">Link 2<i class="bi small bi-caret-down-fill"></i> </a>
            <ul id="sub_menu_1" class="submenu collapse" data-bs-parent="#accordion">
                <li><a class="nav-link" href="#">Item 1</a></li>
                <li><a class="nav-link" href="#">Item 2</a></li>
            </ul>

        </li>
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" data-bs-target="#sub_menu_2" href="#">Link 3<i class="bi small bi-caret-down-fill"></i> </a>
            <ul id="sub_menu_2" class="submenu collapse" data-bs-parent="#accordion">
                <li><a class="nav-link" href="#">Item 1</a></li>
                <li><a class="nav-link" href="#">Item 2</a></li>

            </ul>
        </li>
        <li class="nav-item">
            <a class="nav-link no-submenu" href="#">Link 4</a>
        </li>
        <li class="nav-item">
            <a class="nav-link no-submenu" href="#">Link 5</a>
        </li>
    </ul>
</nav>    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
    // 监听无下拉菜单的链接点击事件
    $('.no-submenu').on('click', function() {
        // 关闭所有已展开的子菜单
        $('.submenu.collapse.show').each(function() {
            const collapseInstance = bootstrap.Collapse.getInstance(this);
            if (collapseInstance) {
                collapseInstance.hide();
            }
        });
    });
});
</script>

</body>
</html>

代码说明 #

1. 新增no-submenu类标记无下拉的导航链接，便于精准选择目标元素
2. 在页面加载完成后，给标记的链接绑定点击事件
3. 遍历所有带有.show类（展开状态）的子菜单，通过Bootstrap Collapse实例调用hide()方法关闭它们
4. 原链接的跳转逻辑不受任何影响，点击后会正常跳转到目标地址

内容的提问来源于stack exchange，提问作者Tompkins