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

【问题标题】：Navbar data-toggle and data-target doesn't work导航栏数据切换和数据目标不起作用
【发布时间】：2018-05-16 15:20:52
【问题描述】：

我正在尝试制作一个响应式导航栏。在桌面显示 NavBar 中的 NavItems，但在小型设备中显示三明治图标，当我们单击它时应该显示相同的 NavItems。但是，当我单击按钮时，什么也没有发生。我正在改编本教程： https://www.youtube.com/watch?v=oUKJA6B1Xr4

视图如下所示：

small devices version

desktop version

我的导航栏.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;

【问题讨论】：

标签： javascript html twitter-bootstrap reactjs

【解决方案1】：

我忘记将 jquery 链接放在 index.html 文件中。现在可以了:)

【讨论】：