如何使用多個按鈕觸發相同的下拉/彈出窗口？

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。