Question

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

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

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

只需打开一份副本即可通过按钮打开并显示在旁边。

我使用引导程序一无所获，并且使用Popper.js根本没有成功（即使我认为这可能是一种解决方案）。

Answer 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的设置方式。

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

1 个答案: