reactjs - 菜单渲染列表更改 Y 位置

Question

我在做一个简单的菜单，稍微练习一下

如果我单击第二个选项，我会呈现 options2Option 列表，但它会在 Y 中更改

在没有任何 Y 运动的情况下如何做到这一点？（如果您删除，则相同<Global/>）

我想知道它是否是关于某个绝对位置，内部相对但我还没有确定

import React, { useState } from 'react'
import styled, { createGlobalStyle } from 'styled-components'

export const Menu = () => {

    const Global = createGlobalStyle`
    body{

        margin:0;
        padding:0;
        height:100vh;
        display: flex;        
        align-items: center;
        justify-content: center;
        
    }
    `

    const Active = styled.div`     
    cursor: pointer;
    width:60px;
    `
    const UL = styled.ul`     
    list-style: '- ';
    display:${() => toggle || "none"};
    
    `
    const LI = styled.li`     
    padding:.1rem 0;
    
    `

    const [toggle, setToggle] = useState(false)

    const handleToggle = () => {

        setToggle(!toggle)

    }

    console.log(toggle)

    const option2Options = [
        '2.a opcion',
        '2.b opcion',
        '2.c opcion',
        '2.d opcion',
        '2.e opcion',

    ]

    return (
        <div>
            <Global />
            <div>Opcion 1</div>
            <Active backgroundColor='red'
                onClick={handleToggle}
            >Opcion 2</Active>
            <UL>
                {
                    toggle &&
                    (
                        option2Options.map((element, index) => (
                            <LI key={index}>{element}</LI>
                        ))
                    )
                }
            </UL>


            <div>Opcion 3</div>
            <div>Opcion 4</div>

        </div>
    )
}

提前致谢

标签： reactjsstyled-componentsuse-state