使用循环在列中显示 3 个 div，然后显示 1 个 div

Question

我想连续有3个div，然后，当我点击其中一个时，一个将占据这3行100%的div将显示在它的下面。

html

<div className={styles.features_type}>
                    {links.map(link => (
                    <div key={link.id} className={openTab === link.id ? styles.feature_open : ""}>
                        <div className={styles.features_cards}>
                            {link.subMenus.map(subMenu => (
                                <div key={subMenu.id}>
                                    <div onClick={() => {openMenu(subMenu.id)}}
                                        className={`${styles.features_card} ${active ? styles.active : ""}}`}>
                                            <h5>{subMenu.title}</h5>
                                    </div>
                                    {menuOpen === subMenu.id && (
                                    <div className={styles.features_cardContent}>
                                        {subMenu.subsubMenu.map(sub => (
                                        <div key={sub.id}>
                                            <p>{sub.paragraph}</p>
                                            <ul>
                                                {sub.elements.map((element, index) => (
                                                    <li key={index}>
                                                        <p>{element}</p>
                                                    </li>
                                                ))}
                                            </ul>
                                            <div>
                                                <button>Commander</button>
                                                <a href="#">En savoir plus →</a>
                                            </div>
                                        </div>
                                        ))}
                                    </div>
                                    )}
                                </div>
                            ))}
                        </div>
                    </div>
                    ))}
                </div>

我的常量

        {
            id: 1,
            title: 'Titre',
            subMenus: [
                {
                    id: '01',
                    title: 'Titre',
                    subsubMenu: [
                        {
                            id: '01',
                            paragraph: 'paragraph',
                            elements : [
                                'elements.',
                                'elements.',
                            ]
                        }
                    ],
                },
                {
                    id: '02',
                    title: 'Titre',
                    subsubMenu: [
                        {
                            id: '01',
                            paragraph: 'paragraph',
                            elements : [
                                'elements.',
                                'elements.',
                            ]
                        }
                    ],
                },
                {
                    id: '03',
                    title: 'Titre',
                    subsubMenu: [
                        {
                            id: '01',
                            paragraph: 'paragraph',
                            elements : [
                                'elements.',
                                'elements.',
                            ]
                        }
                    ],
                },
                {
                    id: '04',
                    title: 'Titre',
                    subsubMenu: [
                        {
                            id: '01',
                            paragraph: 'paragraph',
                            elements : [
                                'elements.',
                                'elements.',
                            ]
                        }
                    ],
                },
            ],
        },

    ]

打开一个菜单功能

        if (menuOpen === id) {
            setIsMenuOpen(null)
        } else {
            setIsMenuOpen(id)
        }
    }

我尝试移动我想要 100% 显示的菜单，但它不会显示我想要的位置。

还有我想要的

对于我做错的事情提供一点帮助将非常感激 我迷路了，我要修改css、js、html吗？

谢谢你

还是不知道该怎么做。循环使它变得困难。我不知道如何设法在一行中包含三列，然后在一行中包含 1 列。 这是我的一些CSS

.features_cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    cursor: pointer;
}
.features_card {
    max-width: 310px;
    width: 100%;
    padding: 30px 60px 25px 30px;
    position: relative;
    transition: 50ms;
    margin-bottom: 10px;
    margin-left: 5px;
}

Answer 1

隐藏 100% 宽度容器并在单击操作时更改属性。添加不同的类并为其设置宽度属性。 如果这是一个网格，请使用 grid-column-start 和 grid-column-end css 属性。 如果您使用 bootstrap 或类似的类 col-12 应该填充行容器的所有宽度。