如何使用多个按钮触发相同的下拉/弹出窗口？

Question

如何使用多个按钮触发相同的下拉菜单？

例如，我在页面special menu的顶部有一个按钮，在中间special menu有一个按钮...在底部special menu有一个按钮。 单击其中任何一个时，都应在附近打开一个下拉菜单（或弹出窗口）。 不仅在第一special menu附近。 但是被点击的附近。

下拉列表应该是相同的html元素 。 不是html副本。 不是即时复制。 根本没有副本。 只是一个要素。

只能通过打开按钮的位置打开和显示一个副本。

使用引导程序我什么也没发现，使用Popper.js也没有成功（即使我认为这可能是一种解决方案）。

Answer 1

假设您已经创建了dropdown元素：

var dropdown = document.createElement('div');
//  TODO: Populate the element.

或从DOM中获取：

var dropdown = document.getElementById('dropdown');

您可以采用以下方法：

function attachListener(target) {
    target.addEventListener('click', function() {
        if (dropdown.parentNode) {
            //  Remove dropdown from the DOM.
            dropdown.parentNode.removeChild(dropdown);
        }

        //  Add the dropdown inside the target.
        target.appendChild(dropdown);
    });
}

var targets = document.getElementsByClassName('special-menu');
for (var i = 0; i < targets.length; i++) {
    attachListener(targets[i]);
}

当然，确切的实现取决于您如何设置DOM。