导航栏中的问题，因为我无法使其响应

Question

我制作了在 html 和 css 中工作的导航，但是当我添加到它时反应不起作用，而且我也无法在文件中添加脚本但是它没有用。我使用了反应头盔，但它也没有帮助我。事实上，当我添加 bootstrap 导航栏时，它也没有帮助我。当我将其设置为低于 800 像素时，我遇到了一个问题，它显示了汉堡包菜单选项，但是当我单击它时，它没有显示菜单。当它在低 px

时总是显示主菜单时还有一件事

这是我的 JSX 代码

 import React from 'react'
import './Heading.css'
import MenuIcon from '@material-ui/icons/Menu';
import Nav_items from './Nav_items'
import Nav_icons from './Nav_icons'
import useDocumentTitle from '../Document'
const Heading = () => {
    useDocumentTitle('Home')
    return (
       
        <div>
           <nav class="nav">
        <div class="nav-menu flex-row">
            <div class="nav-brand">
                <a href="/" class="text-gray" >NOOB-GEEKS</a>
            </div>
            <div class="toggle-collapse">
                <div class="toggle-icon"> 
                    <MenuIcon/>
                </div>
            </div>
            <div>
              <Nav_items/>
            
            </div>
           <Nav_icons/>
        </div>
    </nav>
   
        </div>
    )
   
    
}

export default Heading

这是我的 nav_items 和 nav_icons 组件

import React from 'react'
import { NavLink } from 'react-router-dom';

const Nav_items = () => {
    return (
        <div className="nav-items">
                    
                <NavLink activeClassName='nav-link' to="/">Home</NavLink>
                <NavLink className='nav-link' to="/category">Category</NavLink>
                <NavLink className='nav-link' to="/pages">Pages</NavLink>
                <NavLink className='nav-link' to="/archives">Archives</NavLink>
                <NavLink className='nav-link' to="/contact-us">Contact us</NavLink>
                <NavLink className='nav-link' to="/log-in">Log-in/Sign-up</NavLink>
               
                </div>
    )
}

export default Nav_items

import React from 'react'
import FacebookIcon from '@material-ui/icons/Facebook';
import InstagramIcon from '@material-ui/icons/Instagram';
import LinkedInIcon from '@material-ui/icons/LinkedIn';
import TwitterIcon from '@material-ui/icons/Twitter';
import YouTubeIcon from '@material-ui/icons/YouTube';
const Nav_icons = () => {
    return (
        <div class="nav-social text-gray">
                <a href="" target='_blank' ><FacebookIcon/></a>
                <a href="" target='_blank'><InstagramIcon/></a>
                <a href="" target='_blank'><TwitterIcon/></a>
                <a href="" target='_blank'><LinkedInIcon/></a>
                <a href="" target='_blank'><YouTubeIcon/></a>
            </div>
    )
}

export default Nav_icons

这是我的css代码


.nav{
    background: white;
    padding: 0 2rem;
    height:0rem;
    min-height: 10vh;
    overflow:hidden;
    transition:height 1s ease-in-out ;
    border-bottom: 1px solid #d3d3d3;
}
.nav .nav-menu{

   justify-content: space-between;
}
.nav .toggle-collapse{
    position: absolute;
    top: 0%;
    width: 90%;
    cursor: pointer;
    display: none;
}
.nav .toggle-collapse .toggle-icon{
    display: flex;
    justify-content: flex-end;
    padding: 1.7rem 0;
}

nav.toggle-collapse .toggle-icon div{
font-size: 1.4rem;
color: var(--text-gray);
}
.collapse{
    height: 30rem;
}
.nav .nav-items{
   
    display: flex;
    margin: 0;
}
.nav .nav-items .nav-link{
    padding: 1.6rem 1rem;
    font-size: 1.1rem;
    position: relative;
    font-family: var(--Livvic);
    font-size: 1.1rem;
}
.nav .nav-items .nav-link:hover{
    background-color: var(--midnight);
}
.nav .nav-items  .nav-link:hover{
  color:var(--white);
}

.nav .nav-brand {
    font-size: 1.6rem;
    padding: 1rem 0;
    display: block;
    font-family: var(--Lexend);
    font-size: 1.6rem;
 }
.nav-social{
    padding: 1.4rem 0;
}
.nav-social a{
    padding: 0 .2rem;
}
.nav-social a:hover{
    color: #a1c4cf;
}
@media only screen and (max-width:800px) {
    .nav .nav-menu, .nav .nav-items{
        flex-direction: column;

    }
    .nav .toggle-collapse{
        display: initial;
    }
}

这是我的脚本，我可以添加它

$(document).ready(function() {`
    $nav = $('.nav');
    $toggleCollapse = $('.toggle-collapse');

    $toggleCollapse.click(function () {
        $nav.toggleClass('collapse');
        
    })
    //owl caraousel
    $('.owl-carousel').owlCarousel({
        loop: true,
        autoplay:true,
        autoplayTimeout:3000 ,
        dots:false,
        nav:true,
        navText:[$('.owl-navigation .owl-nav-prev'),$('.owl-navigation  .owl-nav-next')]
    });
`});

请帮忙...正如我再次指出的，我的问题是当我点击菜单时我的菜单没有打开

Answer 1

要在 React 中切换，您不需要 jQuery。要在 React 中添加或删除 class，您可以使用示例如下。

const Heading = () => {
    useDocumentTitle('Home')
    //create a open state (true / false)
    const [ open, setOpen ] = useState(false);

    //a simple toggle function that switches between true/false
    const toggle = () => setOpen(!open)
    return (
       
        <div>
           // here we add the 'collapse' class when it's false
           <nav class={`nav ${ open ? '' : 'collapse' }`}>
        <div class="nav-menu flex-row">
            <div class="nav-brand">
                <a href="/" class="text-gray" >NOOB-GEEKS</a>
            </div>
            <div class="toggle-collapse">
                //here u can use a onClick event to toggle true/false
                <div class="toggle-icon" onClick={toggle} > 
                    <MenuIcon/>
                </div>
            </div>
            <div>
              <Nav_items/>
            
            </div>
           <Nav_icons/>
        </div>
    </nav>
   
        </div>
    )
   
    
}

export default Heading

我不使用 bootstrap 所以我不知道在哪里添加特定的 classes，你应该自己解决那部分。

导航栏中的问题，因为我无法使其响应

Problem in navigation bar as Im not able to make it responsive

javascript

navbar

reactjs