如何在 ReactJs 的移动汉堡菜单上切换引导导航栏答案

【问题标题】：How to toggle bootstrap navbar on mobile hamburgle menu in ReactJs如何在 ReactJs 的移动汉堡菜单上切换引导导航栏
【发布时间】：2021-03-14 02:38:01
【问题描述】：

我正在 ReactJs 中创建一个引导导航栏，我想在移动设备上切换汉堡菜单以显示我的菜单列表。

如何让 React 切换菜单以显示和隐藏它？

import React from "react";

export default function Header() {
   return (
     <div>
       <header className="top-navbar">
         <nav className="navbar navbar-expand-lg navbar-light bg-light">
           <div className="container-fluid">
             <a className="navbar-brand" href="index.html">
               <img src="/logo-hosting.png" alt="" />
             </a>
             <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbars-host" aria-controls="navbars-rs-food" aria-expanded="false" aria-label="Toggle navigation">
               <span className="icon-bar" />
               <span className="icon-bar" />
               <span className="icon-bar" />
             </button>
             <div className="collapse navbar-collapse" id="navbars-host">
               <ul className="navbar-nav ml-auto">
                 <li className="nav-item active"><a className="nav-link" href="index.html">Home</a></li>
                 <li className="nav-item"><a className="nav-link" href="about.html">About Us</a></li>
                 <li className="nav-item"><a className="nav-link" href="features.html">Features </a></li>
                 <li className="nav-item dropdown">
                   <a className="nav-link dropdown-toggle" href="#" id="dropdown-a" data-toggle="dropdown">Hosting </a>
                   <div className="dropdown-menu" aria-labelledby="dropdown-a">
                     <a className="dropdown-item" href="hosting.html">Web Hosting </a>
                     <a className="dropdown-item" href="hosting.html">WordPress Hosting </a>
                     <a className="dropdown-item" href="hosting.html">Cloud Server </a>
                     <a className="dropdown-item" href="hosting.html">Reseller Package </a>
                     <a className="dropdown-item" href="hosting.html">Dedicated Hosting </a>
                   </div>
                 </li>
                 <li className="nav-item"><a className="nav-link" href="domain.html">Domain</a></li>
                 <li className="nav-item"><a className="nav-link" href="pricing.html">Pricing</a></li>
                 <li className="nav-item"><a className="nav-link" href="contact.html">Contact</a></li>
               </ul>
               <ul className="nav navbar-nav navbar-right">
                 <li><a className="hover-btn-new log" href="#" data-toggle="modal" data-target="#login"><span>Customer Login</span></a></li>
               </ul>
             </div>
           </div>
         </nav>
       </header>
     </div>
   );
}

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

您可以使用useState 并将class 添加到nav

     export const Example = () => {
         const[openMenu, toggleOpenMenu] = useSate(false);
           

           return (
             ...

             <button className="navbar-toggler" onClick={() => toggleMenu}>
               <span className="icon-bar" />
               <span className="icon-bar" />
               <span className="icon-bar" />
             </button>
             
             <ul className={openMenu ? "navbar-nav nav-open ml-auto" : "navbar-nav ml-auto }>
              
              ...

           )

        }

and then on CSS:

.nav-open {
 // your magic here
}

【讨论】：