带有下拉菜单的引导工具栏，可同时单击和折叠下拉菜单

1.使切换按钮可单击

用<a> Package <button>。

<a href="./home.html" class="redirect home-page">
  <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false">
    Home
  </button>
</a>

2.折叠下拉菜单

将类show添加到要通过JS折叠的下拉列表中。
3.棘手的部分
当您点击索引页面（即index.html）上的“主页”按钮时，如何折叠主页（即home.html）上的“主页”下拉菜单？
使用查询字符串。

步骤1

当用户单击索引页上的“主页”按钮时添加查询字符串。

const goToHome = document.querySelector(".home-page");

goToHome.addEventListener('click', function(event) {
  event.preventDefault();
  window.location.href = goToHome.href + '?show=home';
}, false);

步骤2

检查主页加载时的查询字符串值。
如果“show”的值等于“home”，则折叠“Home”下拉菜单。

const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});

// Get value of "show" --> "127.0.0.1:5500/home.html?show=home"
let value = params.show; // "home"

const homeDropdown = document.getElementById("home-collapse");

if (value == "home") {
  homeDropdown.classList.add("show");
}

Live demo（第一个字母）

一个快有必用
元素，也可以创建透明按钮。

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">

使用带有data-bs-target的href按钮链接