导航栏数据切换和数据目标不起作用

Z时代
2024-01-10
分类：问答

我正在尝试制作响应式导航栏。在桌面上显示NavBar中的NavItems，但在小设备中显示三明治图标，当我们点击它时应显示相同的NavItems。但是，当我点击按钮时，没有任何反应。我做这个教程的适应： https://www.youtube.com/watch?v=oUKJA6B1Xr4导航栏数据切换和数据目标不起作用

的看法是这样的：

small devices version

desktop version

我NavBar.js

import React, {Component} from 'react'; 
import NavItems from "./NavItems"; 
class NavBar extends Component { 
render() { 
    return (
     <div> 
      <nav className="navbar navbar-default panel-app"> 
       <div className="navbar-header"> 
        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" 
          data-target="#nav-collapse"> 
         <span className="icon-bar"></span> 
         <span className="icon-bar"></span> 
         <span className="icon-bar"></span> 
        </button> 
        <a className="navbar-brand" href="#">Hoje para jantar</a> 
       </div> 
       <div className="collapse navbar-collapse" id="nav-collapse"> 
        <NavItems className="nav navbar-nav" data-toggle="collapse" data-target=".in" href=""></NavItems> 
       </div> 
      </nav> 
     </div> 
    ); 
} 
} 
export default NavBar;

我NavItems。 js

import React, {Component} from 'react'; 
class NavItems extends Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     return (
      <ul> 
       <li className="nav navbar-brand"><a href="#">Receitas</a></li> 
       <li className="nav navbar-brand"><a href="#">Por categoria</a></li> 
      </ul> 
     ); 
    } 
} 
export default NavItems;