Question

我在这里使用此下拉菜单有问题： Background

问题是它没有显示子菜单的类别，

Navbarsubitem.js：

import React from 'react'
function NavBarSubItem(props)
{
return(
    <div className={props.subLi.liClassName}>
        <a className={props.subLi.aClassName} href={props.subLi.href}> </a>
    </div>
)
}
export default NavBarSubItem

Navbaritem.js：

import React from 'react'
import NavBarSubItem from './NavBarSubItem'
function NavBarItem(props)
{
function responsitiveMenu(){
    var x = document.getElementById("idTopnav");
    var y = document.getElementById("idIconItem");
    if(x.className === "topNav") {
        x.className += "-responsitive";
        y.className = "fa fa-fw fa-reply"
    }else{
        x.className += "topnav";
        y.className= "fa fa-fw fa-bar"      
    }
}

const NavBarSubItems = props.li.subItems.map(item => <NavBarSubItem key={item.id} subLi={item}/>);
return(
    <div className={props.li.liClassName}>
      <a className={props.li.aClassName} href={props.li.href} onClick={props.li.liClassName === "responsitive-icon" ? responsitiveMenu : ""} ><i className={props.li.icon} id={(props.li.liClassName === "responsitive-icon") ? "idIconItem":""}></i>{props.li.text}</a>
        <div className="dropDownItem-content">
            {props.li.liClassName === "dropDownItem" ? NavBarSubItems: ""}
        </div>
    </div>
)
}
export default NavBarItem

Navbarblock.js：

import React from 'react'
import NavBarItem from './NavBarItem'
function NavBarBlock(props){
const navBaritems = props.block.navItems.map(item => <NavBarItem key={item.id} li={item}/>);
return(
    <div className={props.block.id}>
        {navBaritems}
    </div>
)
}
export default NavBarBlock

Navbar.js：

import React from 'react'
import NavBarData from '../data/NavBarData'
import NavBarBlock from './NavBarBlock'
import './Nav.css'
class NavBar extends React.Component {
render (){
const navBarBlock = NavBarData.map(item=><NavBarBlock key={item.id} block={item}  
        img={item.imgSrc}></NavBarBlock>) 
    return (
        <nav className='topNav' id='idTopNav'>
            <h2>{navBarBlock}</h2>
        </nav>
    )
    }
    }
    export default NavBar

最后，我将我放在我的app.js中如果您需要我的CSS代码，请插入，我该如何解决这个问题？谢谢！

Answer 1

当我想到一个下拉菜单时，我会想到这段代码和Always Sunny的经典Frank Reynolds的Egg（只是一个起点！）

在我的导航栏组件内部：

<div className="dropdown-content">
    <a href="">Utility</a>
    <a href="">Utility2</a>
    <a href="">Utility3</a>
</div>

在我的navbar.css内

/* Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

使用此代码，您将获得基本的下拉菜单。然后，您可以使用它来应用所需的样式和功能。

如何解决此Dropmenu显示问题？

1 个答案: