Bagaimanakah Saya Boleh Melaksanakan Submenu Jatuh Turun Bootstrap dalam Bootstrap 3, 4 dan 5?-tutorial css-php.cn

Bagaimanakah Saya Boleh Melaksanakan Submenu Jatuh Turun Bootstrap dalam Bootstrap 3, 4 dan 5?

Linda Hamilton

Lepaskan： 2024-12-27 07:54:09

asal

785 orang telah melayarinya

How Can I Implement Bootstrap Dropdown Submenus in Bootstrap 3, 4, and 5?

Submenu Turun Bootstrap yang hilang

Bootstrap 3 mengalih keluar kelas submenu lungsur dalam RC, kerana submenu tidak lagi digunakan secara meluas, terutamanya pada mudah alih peranti. Walau bagaimanapun, terdapat beberapa kaedah untuk mencipta semula fungsi submenu menggunakan CSS atau JavaScript.

Bootstrap 5 (Kemas Kini 2023)

Kaedah 1: Togol JavaScript

Untuk mengelakkan submenu daripada ditutup apabila dropdown induk buka:

let dropdowns = document.querySelectorAll('.dropdown-toggle');
dropdowns.forEach((dd) => {
  dd.addEventListener('click', function (e) {
    var el = this.nextElementSibling;
    el.style.display = el.style.display === 'block' ? 'none' : 'block';
  });
});

Salin selepas log masuk

Kaedah 2: Menu CSS Tuding Sahaja

Untuk menu lungsur Navbar:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}

Salin selepas log masuk

Bootstrap 4 (2018 Kemas kini)

Anda boleh melaksanakan fungsi yang sama menggunakan CSS:

Submenu Navbar pada Hover

.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
}

Salin selepas log masuk

Bootstrap 3

Contoh menggunakan Bootstrap 3:

CSS

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
  border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

Salin selepas log masuk

Sampel HTML

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="menu-item dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li class="menu-item dropdown dropdown-submenu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
              <ul class="dropdown-menu">
                <li class="menu-item ">
                  <a href="#">Link 1</a>
                </li>
                <li class="menu-item dropdown dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                  <ul class="dropdown-menu">
                    <li>
                      <a href="#">Link 3</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melaksanakan Submenu Jatuh Turun Bootstrap dalam Bootstrap 3, 4 dan 5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!