如何使用 React.js 中的 Bootstrap 5 导航栏在移动设备和悬停在桌面上切换子菜单

问题描述 投票：0回答：2

我想在我的项目中使用 

Bootstrap 5 Navbar
组件。它有 
dropdown menus
，里面也有 
submenus
。在桌面和移动设备上一切正常。我想在桌面上悬停时打开下拉菜单和子菜单，并且想在移动设备上单击时打开它。一切都按预期工作正常。但是当我尝试再次关闭 
submenus
和 
dropdown-menu
它 
on mobile
时，它就无法关闭。如何使用 
React.js
关闭移动设备上的子菜单和下拉菜单。请帮助我已经浪费了将近两天的时间。

Main.jsx -

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.jsx -

import React from "react";
import "./App.css";

function App() {
  return (
    <>
      <div className="dvMenu">
        <nav className="navbar navbar-expand-lg bg-body-tertiary">
          <div className="container-fluid">
            <a className="navbar-brand" href="#">
              Navbar
            </a>
            <button
              className="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon"></span>
            </button>
            <div
              className="collapse navbar-collapse"
              id="navbarSupportedContent"
            >
              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                <li className="nav-item">
                  <a className="nav-link active" aria-current="page" href="#">
                    Home
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#">
                    Link
                  </a>
                </li>
                <li className="nav-item dropdown">
                  <a
                    className="nav-link dropdown-toggle"
                    href="#"
                    role="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    Dropdown
                  </a>
                  <ul className="dropdown-menu">
                    <li>
                      <a className="dropdown-item" href="#">
                        Submenu
                      </a>
                      <ul className="submenu dropdown-menu">
                        <li>
                          <a className="dropdown-item" href="#">
                            amey
                          </a>
                        </li>
                        <li>
                          <a className="dropdown-item" href="#">
                            rajesh
                          </a>
                        </li>
                        <li>
                          <a className="dropdown-item" href="#">
                            manish
                          </a>
                          <ul className="subsubmenu dropdown-menu">
                            <li>
                              <a className="dropdown-item" href="#">
                                developer
                              </a>
                              <a className="dropdown-item" href="#">
                                developer
                              </a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a className="dropdown-item" href="#">
                        adhiraj
                      </a>
                    </li>
                    <li>
                      <a className="dropdown-item" href="#">
                        aldair
                      </a>
                    </li>
                  </ul>
                </li>
                <li className="nav-item">
                  <a className="nav-link disabled" aria-disabled="true">
                    Disabled
                  </a>
                </li>
              </ul>
              <form className="d-flex" role="search">
                <input
                  className="form-control me-2"
                  type="search"
                  placeholder="Search"
                  aria-label="Search"
                />
                <button className="btn btn-outline-success" type="submit">
                  Search
                </button>
              </form>
            </div>
          </div>
        </nav>
      </div>
    </>
  );
}

export default App;

应用程序.css -

.dvMenu .navbar-nav li {
  position: relative;
}
.dvMenu .dropdown:hover > .dropdown-menu {
  display: block;
}
.dvMenu .dropdown-menu:hover li > .submenu {
  display: block;
  top: 0;
  left: 100%;
  display: block;
}
.dvMenu .dropdown-menu li > .submenu li:hover > .subsubmenu {
  display: block;
  top: 0;
  left: 100%;
  display: block;
}
reactjs navbar bootstrap-5
2个回答
0
投票

您可以通过添加 

onMouseEnter
处理程序或在 
useEffect
中附加事件（未显示）来使下拉列表在悬停时展开。

<a onMouseEnter={showDropdown}
   className="nav-link dropdown-toggle"
   href="#">
  Dropdown
</a>

悬停事件处理程序将调用 Bootstrap show 方法。

function showDropdown(e) {
  bootstrap.Dropdown.getOrCreateInstance(e.target).show();
}

注意事项

在现代 UI 中很少使用悬停时打开的菜单。通过正常的指针使用，此类菜单可能会意外弹出。相比之下，触摸触发菜单在不同设备类型上一致工作。

React Snippet - 打开代码片段以查看并运行完整的演示

const { useState, useEffect, StrictMode } = React;
const { createRoot } = ReactDOM;
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

function App() {

 function showDropdown(e) {
   bootstrap.Dropdown.getOrCreateInstance(e.target).show();
 }

  return (
    <div className="App">
      <div className="dvMenu">
        <nav className="navbar navbar-expand-lg bg-body-tertiary">
          <div className="container-fluid">
            <a className="navbar-brand" href="#">
              Navbar
            </a>
            <button
              className="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span className="navbar-toggler-icon"></span>
            </button>
            <div
              className="collapse navbar-collapse"
              id="navbarSupportedContent"
            >
              <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                <li className="nav-item">
                  <a className="nav-link active" aria-current="page" href="#">
                    Home
                  </a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#">
                    Link
                  </a>
                </li>
                <li className="nav-item dropdown">
                  <a
                    onMouseEnter={showDropdown}
                    className="nav-link dropdown-toggle"
                    href="#"
                    role="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    Dropdown
                  </a>
                  <ul className="dropdown-menu">
                    <li>
                      <a className="dropdown-item" href="#">
                        Submenu
                      </a>
                      <ul className="submenu dropdown-menu">
                        <li>
                          <a className="dropdown-item" href="#">
                            amey
                          </a>
                        </li>
                        <li>
                          <a className="dropdown-item" href="#">
                            rajesh
                          </a>
                        </li>
                        <li>
                          <a className="dropdown-item" href="#">
                            manish
                          </a>
                          <ul className="subsubmenu dropdown-menu">
                            <li>
                              <a className="dropdown-item" href="#">
                                developer
                              </a>
                              <a className="dropdown-item" href="#">
                                developer
                              </a>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                    <li>
                      <a className="dropdown-item" href="#">
                        adhiraj
                      </a>
                    </li>
                    <li>
                      <a className="dropdown-item" href="#">
                        aldair
                      </a>
                    </li>
                  </ul>
                </li>
                <li className="nav-item">
                  <a className="nav-link disabled" aria-disabled="true">
                    Disabled
                  </a>
                </li>
              </ul>
              <form className="d-flex" role="search">
                <input
                  className="form-control me-2"
                  type="search"
                  placeholder="Search"
                  aria-label="Search"
                />
                <button className="btn btn-outline-success" type="submit">
                  Search
                </button>
              </form>
            </div>
          </div>
        </nav>
      </div>
    </div>
  );
}
.dvMenu {
  margin-top: 1rem;
}
<div id="root"></div>

<!-- React 18 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>


<!-- Bootstrap 5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

0
投票

我认为默认隐藏它可以解决问题

.dvMenu .dropdown > .dropdown-menu {
  display: hidden;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.