Bootstrap 如何使引导下拉菜单同时可单击和折叠？

flseospp  于 2023-03-16  发布在  Bootstrap
关注(0)|答案(2)|浏览(197)

我尝试在Bootstrap 5的例子中实现侧边栏的可折叠版本。它工作得很好，但是我还想让顶层按钮（例如Dashboard）成为可点击的链接，除了显示折叠的链接列表之外，还可以打开一个新页面。

twitter-bootstrap

2条答案

按热度按时间
py49o6xq

py49o6xq1#

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

1.使切换按钮可单击

用<a>包裹<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.棘手的部分

问：当您单击“主页”按钮时，如何折叠主页（即home.html）上的“主页”下拉菜单，比如说，索引页面（即index.html）？
答：使用查询字符串。

第一步

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

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

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

第二步

加载主页时检查查询字符串值。
如果“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");
}

一个例子

主页.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta
      name="author"
      content="Mark Otto, Jacob Thornton, and Bootstrap contributors"
    />
    <meta name="generator" content="Hugo 0.84.0" />
    <title>Home</title>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
      }

      html {
        height: -webkit-fill-available;
      }

      main {
        display: flex;
        flex-wrap: nowrap;
        height: 100vh;
        height: -webkit-fill-available;
        max-height: 100vh;
        overflow-x: auto;
        overflow-y: hidden;
      }

      .b-example-divider {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.1);
        border: solid rgba(0, 0, 0, 0.15);
        border-width: 1px 0;
        box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
          inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
      }

      .bi {
        vertical-align: -0.125em;
        pointer-events: none;
        fill: currentColor;
      }

      .dropdown-toggle {
        outline: 0;
      }

      .nav-flush .nav-link {
        border-radius: 0;
      }

      .btn-toggle {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.5rem;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.65);
        background-color: transparent;
        border: 0;
      }

      .btn-toggle:hover,
      .btn-toggle:focus {
        color: rgba(0, 0, 0, 0.85);
        background-color: #d2f4ea;
      }

      .btn-toggle::before {
        width: 1.25em;
        line-height: 0;
        content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%280,0,0,.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
        transition: transform 0.35s ease;
        transform-origin: 0.5em 50%;
      }

      .btn-toggle[aria-expanded='true'] {
        color: rgba(0, 0, 0, 0.85);
      }

      .btn-toggle[aria-expanded='true']::before {
        transform: rotate(90deg);
      }

      .btn-toggle-nav a {
        display: inline-flex;
        padding: 0.1875rem 0.5rem;
        margin-top: 0.125rem;
        margin-left: 1.25rem;
        text-decoration: none;
      }

      .btn-toggle-nav a:hover,
      .btn-toggle-nav a:focus {
        background-color: #d2f4ea;
      }

      .scrollarea {
        overflow-y: auto;
      }

      .fw-semibold {
        font-weight: 600;
      }

      .lh-tight {
        line-height: 1.25;
      }

      .redirect {
        text-decoration: none;
      }
    </style>
  </head>

  <body>
    <main>
      <div class="flex-shrink-0 p-3 bg-white" style="width: 280px">
        <a
          href="/"
          class="
            d-flex
            align-items-center
            pb-3
            mb-3
            link-dark
            text-decoration-none
            border-bottom
          "
        >
          <svg class="bi me-2" width="30" height="24">
            <use xlink:href="#bootstrap" />
          </svg>
          <span class="fs-5 fw-semibold">Collapsible</span>
        </a>
        <ul class="list-unstyled ps-0">
          <li class="mb-1">
            <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>
            <div class="collapse" id="home-collapse">
              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                <li><a href="#" class="link-dark rounded">Overview</a></li>
                <li><a href="#" class="link-dark rounded">Updates</a></li>
                <li><a href="#" class="link-dark rounded">Reports</a></li>
              </ul>
            </div>
          </li>
          <li class="mb-1">
            <a href="./dashboard.html" class="redirect dashboard-page">
              <button
                class="btn btn-toggle align-items-center rounded collapsed"
                data-bs-toggle="collapse"
                data-bs-target="#dashboard-collapse"
                aria-expanded="false"
              >
                Dashboard
              </button>
            </a>
            <div class="collapse" id="dashboard-collapse">
              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                <li><a href="#" class="link-dark rounded">Overview</a></li>
                <li><a href="#" class="link-dark rounded">Weekly</a></li>
                <li><a href="#" class="link-dark rounded">Monthly</a></li>
                <li><a href="#" class="link-dark rounded">Annually</a></li>
              </ul>
            </div>
          </li>
          <li class="mb-1">
            <a href="./orders.html" class="redirect orders-page">
              <button
                class="btn btn-toggle align-items-center rounded collapsed"
                data-bs-toggle="collapse"
                data-bs-target="#orders-collapse"
                aria-expanded="false"
              >
                Orders
              </button>
            </a>
            <div class="collapse" id="orders-collapse">
              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                <li><a href="#" class="link-dark rounded">New</a></li>
                <li><a href="#" class="link-dark rounded">Processed</a></li>
                <li><a href="#" class="link-dark rounded">Shipped</a></li>
                <li><a href="#" class="link-dark rounded">Returned</a></li>
              </ul>
            </div>
          </li>
          <li class="border-top my-3"></li>
          <li class="mb-1">
            <a href="./account.html" class="redirect account-page">
              <button
                class="btn btn-toggle align-items-center rounded collapsed"
                data-bs-toggle="collapse"
                data-bs-target="#account-collapse"
                aria-expanded="false"
              >
                Account
              </button>
            </a>
            <div class="collapse" id="account-collapse">
              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                <li><a href="#" class="link-dark rounded">New...</a></li>
                <li><a href="#" class="link-dark rounded">Profile</a></li>
                <li><a href="#" class="link-dark rounded">Settings</a></li>
                <li><a href="#" class="link-dark rounded">Sign out</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </div>

      <h1 class="m-5">Home</h1>
    </main>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <script>
      const goToHome = document.querySelector('.home-page');
      const goToDashboard = document.querySelector('.dashboard-page');
      const goToOrders = document.querySelector('.orders-page');
      const goToAccount = document.querySelector('.account-page');

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

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

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

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

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

      let value = params.show;

      const homeDropdown = document.getElementById('home-collapse');
      const dashboardDropdown = document.getElementById('dashboard-collapse');
      const ordersDropdown = document.getElementById('orders-collapse');
      const accountDropdown = document.getElementById('account-collapse');

      if (value == 'home') {
        homeDropdown.classList.add('show');
      } else if (value == 'dashboard') {
        dashboardDropdown.classList.add('show');
      } else if (value == 'orders') {
        ordersDropdown.classList.add('show');
      } else if (value == 'account') {
        accountDropdown.classList.add('show');
      }

      (function () {
        'use strict';
        var tooltipTriggerList = [].slice.call(
          document.querySelectorAll('[data-bs-toggle="tooltip"]')
        );
        tooltipTriggerList.forEach(function (tooltipTriggerEl) {
          new bootstrap.Tooltip(tooltipTriggerEl);
        });
      })();
    </script>
  </body>
</html>
赞(0）分享  回复(0）举报  2023-03-16
fzwojiic

fzwojiic2#

一个快速拥有将是使用
元素，也可以创建透明按钮。

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

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

赞(0）分享  回复(0）举报  2023-03-16
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com