Question

我正在尝试制作响应式导航栏。在桌面中显示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;

Answer 1

我忘了将jquery链接放在index.html文件中。现在它有效：）

Navbar数据切换和数据目标不起作用

1 个答案: