Bootstrap下拉子菜单关闭上游子菜单

Bootstrap是一种流行的前端开发框架，它提供了丰富的组件和样式，方便开发人员快速构建响应式网页。下拉子菜单是Bootstrap中常用的一个组件，用于实现导航栏中的多级菜单。

在Bootstrap中，下拉子菜单的关闭上游子菜单是通过CSS和JavaScript来实现的。当点击下拉菜单的父级菜单时，会触发JavaScript事件，通过添加或移除CSS类来控制子菜单的显示与隐藏。

具体实现步骤如下：

在HTML中，使用Bootstrap提供的下拉菜单组件创建父级菜单和子菜单的结构。例如：

<nav class="navbar">
  <ul class="navbar-nav">
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        父级菜单
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">子菜单1</a>
        <a class="dropdown-item" href="#">子菜单2</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">子菜单3</a>
      </div>
    </li>
  </ul>
</nav>

引入Bootstrap的CSS和JavaScript文件。可以通过CDN链接或下载本地文件的方式引入。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

在JavaScript中，监听父级菜单的点击事件，并通过添加或移除CSS类来控制子菜单的显示与隐藏。例如：

document.querySelector('.dropdown-toggle').addEventListener('click', function() {
  var dropdownMenu = this.nextElementSibling;
  if (dropdownMenu.style.display === 'none') {
    dropdownMenu.style.display = 'block';
  } else {
    dropdownMenu.style.display = 'none';
  }
});

通过以上步骤，当点击父级菜单时，子菜单会显示或隐藏。

在腾讯云的产品中，可以使用腾讯云的云服务器（CVM）来部署和运行基于Bootstrap开发的网站。腾讯云的CVM提供了稳定可靠的云计算资源，适用于各种规模的网站和应用程序。您可以通过以下链接了解更多关于腾讯云云服务器的信息：

请注意，以上答案仅供参考，具体实现方式可能因具体情况而有所不同。