使用 JavaScript 和 CSS 创建弹出菜单窗口答案

【问题标题】：Creating a pop-up-menu window with JavaScript & CSS使用 JavaScript 和 CSS 创建弹出菜单窗口
【发布时间】：2021-02-03 21:33:47
【问题描述】：

我尝试使用 CSS 和 JavaScript 创建一个小的弹出菜单窗口。不幸的是，我可以通过使用 Google 找到的大多数说明是使用 CSS、JS 和 HTML 的解决方案，但我正在寻找仅使用 CSS 和 JavaScript 的解决方案。

我认为它必须使用“onclick”。通过单击一个包含 2 个按钮的小型弹出菜单，它应该通过这 2 个按钮提供 2 个选项。每个按钮都应该打开一个新的不同的更大的弹出菜单窗口。周围的代码已经准备就绪并且可以工作。所以我要做的“唯一”事情就是在两者之间建立一个小菜单。

这是必须实施的代码：

if (!this.props.dataHandler.userData.isAdmin() && this.props.action === 'activeDevices') {
    tableBody.push(
        <tr
            id={primaryKeyValue}
            onClick={this.renderModal.bind(this, 'reserve', primaryKeyValue)}
            key={primaryKeyValue}
        >
            {children}
            <span className="table-img" id={primaryKeyValue + '_IMG'}></span>
        </tr>
    );
} 
else {
    tableBody.push(
        <tr id={primaryKeyValue} onClick={this.renderModal.bind(this, 'edit', primaryKeyValue)} key={primaryKeyValue}>
            {children}
            <span className="table-img" id={primaryKeyValue + '_IMG'}></span>
        </tr>
    );
}

我想我可以使用 if/else fork 来打开小菜单和以下更大的菜单。在打开以下更大菜单的 onclick-Statement 中，我想实现一个内部 onclick，它会弹出之前的小菜单。这可能吗？我的想法正确吗？或者我应该如何做到最好？

另一个想法是在两者之间不构建小菜单，而是通过单击鼠标左键或右键选择更大的后续菜单。这应该会容易一些吧？

【问题讨论】：

您能否为您的代码创建一个最小、完整且可验证的示例，以便我们对其进行测试并尝试为您提供帮助？ stackoverflow.com/help/minimal-reproducible-example
1.即使使用 javascript 和 css 的解决方案，您始终可以使用 document.createElement('element_tag_name') 方法，然后使用 append() 动态创建新的 html 元素，从而允许您使用 Javascript、css 和 html 解决方案。 2. 为什么不使用 bootstrap 或其他有弹出菜单的库？
我忘了告诉按钮已经在函数 createButtons() 中创建：“var usrMenu =
所以 2 个按钮已经创建并且可以工作了。我只需要告诉代码，如果我单击列表元素，它应该打开带有 2 个创建的按钮/选项“保留”和“编辑”的迷你菜单。通过单击它们，它应该打开 2 个不同的更大菜单。顺便说一句，应该通过单击打开的 2 个不同的更大菜单也已准备就绪并且可以正常工作。它必须非常简单，但是我现在尝试的所有方法都行不通。我认为它只不过是一个相互关联的代码行，就像如果您单击此按钮而不是...然后单击此按钮打开另一个菜单。

标签： javascript css jsx

【解决方案1】：

所以我肯定必须使用 React。我必须用“var”初始化按钮，而不是在函数中使用它们并分配我想用它打开的窗口/菜单并另外构建一个 React 命令，这是否正确？要做三件事？但是我可以轻松地将它们全部集成到受影响的功能中还是更复杂。我怎样才能实现整个事情？我所有的努力仍然没有奏效。

所以最后我只需要围绕两个不同的菜单创建一个 2 个按钮选项，通过单击第一个或第二个按钮打开这些菜单。

编辑：没有人 :(？不幸的是，我在这一点上一周以来没有取得任何进展 :(。

【讨论】：