javascript - Z-Index 在 React-Router 的多列菜单中不起作用

问题描述

我有一个使用https://github.com/kontentino/react-multilevel-dropdown构建的多层、多列菜单。我遇到的问题是子菜单项一直出现在主要项目下方。我已经尝试使用 z-index 进行了多次尝试，但似乎没有任何帮助。

我包括我的菜单组件、我的这个页面的 CSS 以及问题的图像。

如果可能的话，我想避免尝试使用列表滚动自定义菜单，但愿意接受另一个多级菜单包。

菜单栏组件.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Container from 'react-bootstrap/Container';

import { NavLink } from 'react-router-dom';
// import { CurrentPage_Update } from '../../redux/ActionCreators';
import Dropdown from 'react-multilevel-dropdown';

import { Loading } from './LoadingComponent';
import '../../shared/styles/menu.css'

const mapStateToProps = (state) => {
    return {
        siteMap: state.siteMap
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        // CurrentPage_Update: (page) => { dispatch(CurrentPage_Update(page)) }
    }
}

class MenuBar extends Component {

    constructor(props) {
        super(props);
        this.state = {
            openCount: 1,
            isOpen: false
        }
    }

    drawLink = (item) => {
        return (
            <NavLink
                to={'/page_' + item.pageId}
                className={`menu menu-link`}
                key={"DDNavLink_" + item.pageId}
                onClick={() => this.setState({ openCount: -1 })}
            >{item.title}</NavLink>

        );
    }

    NavListItem = (item, level, roles) => {


    }

    dropdownItem = (item, level, roles) => {
        let brk = true;
        //TODO: remove next line for production
        item.roles = "*," + item.roles; //Make sure page is shown in development
        if ((item.roles.indexOf("*") < 0) && (item.roles.indexOf("*") < 0)) {
            var itemRoles = item.roles.toLowerCase().split(',');
            for (var i = 0; i < itemRoles.length; i++) {
                if (roles.indexOf(itemRoles[i]) > -1) {
                    //if found
                    brk = false;
                    break;
                }
            }
            if (brk) return;
        }

        if (item.children.length > 0) {
            //if any visible children show dropdown
            //only endpoints are clickable
            if (item.children.find((child) => { return child.visible !== "false" })) {
                return (
                    <Dropdown.Item key={'Dropdown_' + item.pageId} className={`menu menu-item-container`}>
                        AA{item.title}
                        <Dropdown.Submenu position='right' className={`menu-UncontrolledDropdown sub${level + 1}`} >
                            {item.children.map((listItem) => {
                                return (this.dropdownItem(listItem, level + 1, roles))
                            })
                            }
                        </Dropdown.Submenu>
                    </Dropdown.Item>
                )
            }
            else { //otherwise if no visible children show only the item
                if (item.visible !== "false") {
                    return (
                        <Dropdown className={`sub${level + 1} menu menu-item-container`
                        } key={"DDItem_" + item.pageId} >
                            BB{level} { this.drawLink(item)}
                        </Dropdown >
                    )
                }
            }
        }

        else { //if no children show only item
            return (
                <Dropdown.Item className={`sub${level} menu menu-item-container`} key={"DDItem" + item.pageId}>
                    CC{level}
                    {this.drawLink(item, level)}
                </Dropdown.Item>
            )
        }
    }

    render() {

        // const setIsOpen = (value) => { this.setState({ isOpen: value }) }
        // const toggle = () => { setIsOpen(!this.state.isOpen) };


        if (this.props.siteMap.errMess) {
            return (
                <div>
                    {this.props.siteMap.errMess}
                </div>
            )
        }
        else if (this.props.siteMap.isLoading) {
            return <Loading title="Site Menu" />
        }
        else {
            var roles = this.props.siteMap.siteMapData.userRoles.toLowerCase();
            var siteMap = this.props.siteMap.siteMapData.siteMap;

            return (
                <Container>
                    <Row>
                        <Col className="col-2 p-3 menu">
                            <NavLink to='/'>
                                <div className="align-top met-logo"></div>
                            </NavLink>
                        </Col>
                        <Col md={{ span: 9, offset: 1 }} className=" menu ">

                            {
                                siteMap.map((link, index) => {
                                    return <div
                                        key={index}
                                        className='p-1 column menu menu-item-container menu-head'>
                                        {this.dropdownItem(link, 0, roles)}
                                    </div>
                                })
                            }



                            {/* https://github.com/kontentino/react-multilevel-dropdown#readme */}


                        </Col>
                    </Row>
                </Container>
            );
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MenuBar);

菜单.css

/*Necessary to force dropdown items into a straight line */

nav>ul>li>a+div>ul>li>a {
  text-indent: 15px;
  /* Can use padding-left as well */
}

.met-logo {
  background-image: url('../images/METLogo.jpg');
  background-size: 100%;
  background-repeat: no-repeat;
  /* width: 128px;
    height: 91px; */
  width: 100px;
  height: 65px;
  /* border: 1px solid black; */
  top: -5px;
  padding: 3px;
}

.menu {
  color: #000;
  position: sticky;
  top: 5px;
  /* z-index: 1000000; */
  /* border:solid 1px black; */
}

.menu-collapse {
  position: absolute;
  top: 10px;
}

.menu-dropdown-toggle {
  color: #000;
}

.menu-item-container {
  color: #000;
  background-color: #ccc;
  border: solid 1px #555;
  white-space: pre-wrap;
}

.menu-item-container :hover {
  background-color: #aaa;
}

.menu-link {
  color: #000;
  cursor: pointer;
}

.menu-bar {
  color: #000;
}

/* .menu-toggler {
  float: right;
  margin-right: 10px;
} */

.menu-dropdown-container {
  color: #000;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 15px;
  overflow: wrap;
}

.menu-dropdown-container ul {
  box-sizing: content-box;
  background-color: #fff !important;
  border: 0px;
  overflow: wrap;
}

.menu-link {
  color: #000;
}

.menu-dropdown-title {
  color: #000;
}

.menu-dropdown-body {
  color: #000;
}

.menu-head {
  z-index: 9000!important;
}

.menu-UncontrolledDropdown {
  color: #000;
  background-color: #fff!important;
  border: solid 1px #555;
  transform: translate(-10%, 15px);
  /* z-index: 99999!important; */
  /* position: absolute; */
}

.sub0 {
  z-index: 12000;
}

.sub1 {
  z-index: 13000;
}

.sub2 {
  z-index: 14000;
}

.sub3 {
  z-index: 15000;
}

.sub4 {
  z-index: 16000;
}

.menu-UncontrolledDropdown :hover {
  background-color: #bbf;
}

.menu-UncontrolledDropdown>div {
  background-color: #fff;
}

/* .fullWidth {
  width: 100vw!important;
  margin: 2px 2px 2px 2px; 
}*/

.column {
  display: inline-block;
  padding: 8px;
  font: 20px;
  font-weight: 500;
}

----------

这是问题所在的示例。

我在这个项目中没有使用 JQuery，但使用了 React-Bootstrap。

标签： javascriptcssreactjs

javascript - Z-Index 在 React-Router 的多列菜单中不起作用

问题描述

解决方案

推荐阅读