Bagaimanakah Saya Boleh Melaksanakan Submenu Jatuh Turun Bootstrap dalam Bootstrap 3, 4 dan 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';
  });
});

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;
}

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;
}

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;
}

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>

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!