如何使用多个按钮触发相同的下拉/弹出框？答案

【问题标题】：How to trigger the same drop-down/popover with multiple buttons?如何使用多个按钮触发相同的下拉/弹出框？
【发布时间】：2018-09-11 20:59:16
【问题描述】：

如何用多个按钮触发同一个下拉菜单？

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

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

只有一个副本可以在打开它的按钮附近打开和显示。

我没有使用 bootstrap 找到任何东西，并且使用 Popper.js 完全没有成功（即使我猜它可能是一个解决方案）。

【问题讨论】：

请添加一些代码显示一些尝试..

标签： javascript html bootstrap-4 dropdown popover

【解决方案1】：

假设您已经创建了下拉元素：

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。

【讨论】：