[英]How to trigger the same drop-down/popover with multiple buttons?
How to trigger the same drop-down with multiple buttons? 如何使用多个按钮触发相同的下拉菜单?
For instance, I have a button at the top of the page special menu
, and one in the middle special menu
... and another at the bottom special menu
. 例如,我在页面
special menu
的顶部有一个按钮,在中间special menu
有一个按钮...在底部special menu
有一个按钮。 When any of them is clicked, it should open a drop-down (or popover) nearby. 单击其中任何一个时,都应在附近打开一个下拉菜单(或弹出窗口)。 Not just nearby the first
special menu
. 不仅在第一
special menu
附近。 But near by the clicked one. 但是被点击的附近。
The dropdown should be the same html element . 下拉列表应该是相同的html元素 。 Not html copies.
不是html副本。 Not on-the-fly copies.
不是即时复制。 Not a copy at all.
根本没有副本。 Just one element.
只是一个要素。
Just one copy that could be opened and displayed near by the buttons from which it has been opened. 只能通过打开按钮的位置打开和显示一个副本。
I have found nothing using bootstrap, and have not been successful at all with Popper.js (even if I guess it might be a solution). 使用引导程序我什么也没发现,使用Popper.js也没有成功(即使我认为这可能是一种解决方案)。
Assuming you've created the dropdown element: 假设您已经创建了dropdown元素:
var dropdown = document.createElement('div');
// TODO: Populate the element.
or grabbed in from the DOM: 或从DOM中获取:
var dropdown = document.getElementById('dropdown');
You could take an approach like this: 您可以采用以下方法:
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]);
}
Of course, the exact implementation depends on how you want the DOM set up. 当然,确切的实现取决于您如何设置DOM。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.