Question

看这个：https://i.imgur.com/6QDhr1Y.png

当我不添加“溢出：隐藏”或“位置：相对”时，将显示菜单，但是会创建一个水平条。但是，当我同时添加两者时，水平条消失了，但是当我单击以打开菜单时，水平条就可以了。定位好像一切正常，但是什么也没有出现。我正在为此使用React和Sass。

sass文件的示例：

    @include mediaSM_down {
        display: block;
        position: absolute;
        width: 100vw;
        left: 100vw;
        top: 68px;
        height: calc(100vh - 68px);
        background-color: hsla(0, 0%, 21%, 0.95);
        padding: 12px 8px;
    }
}

和React组件：

const NavRight = props => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);
    const toggleMenu = () => {
        setIsMenuOpen(!isMenuOpen);
    }
    const left = isMenuOpen ? '0' : '100vw';

    return (
        <nav className="navbar__right">
            {
                isMenuOpen
                    ? <FaTimes className="navbar__toggle" onClick={toggleMenu} />
                    : <FaBars className="navbar__toggle" onClick={toggleMenu} />
            }
            <div className="navbar__menu" style={{ left: left, }}>
                <MenuItem to="/" text="Home" IconName={FaHome} />
                <MenuItem to="/" text="Series" IconName={FaBookReader} />
                <MenuItem to="/" text="Login" IconName={FaUser} />
            </div>
        </nav>
    )
}

完整代码：骚扰：https://pastebin.com/cbP1UrLq jsx：https://pastebin.com/RWiHAFb5

Answer 1

查看元素是否在DOM中。如果存在，请尝试设置更高的z-index值

打开时不可见的菜单（使用React + Sass）

1 个答案: