创建切换菜单原始javascript

我对如何使用原始javascript创建菜单有点困惑，这与那些交互非常相似：

• 单击按钮并显示下拉列表
• 再次单击并隐藏下拉列表
• 失去对下拉列表的关注并隐藏它

我正在做一系列的测试，但我找不到bootstrap是如何做到的

有人知道它是怎么工作的吗

这就是我所拥有的：

HTML:

---

谢谢

请添加您围绕这个问题所做的工作的代码片段，以及您所面临的具体问题。谢谢Phil！让我们检查一下存储库@PhilReady@AmitBhoyar！谢谢但是否完全有必要将单击事件附加到文档？因为这可能会与其他行为发生冲突，对吗？不，因为您正在添加事件侦听器，所以始终可以添加更多的“单击”事件。我已经使用了这么长时间，没有遇到任何问题。此外，如果愿意，您可以随时删除eventListener。

<button id="drop" onclick="drop();">Drop down</button>
<div id="menu">
    <!-- content here-->
</div>

// Show-hie menu
Array.from(container.querySelectorAll('.task-more')).forEach(function(el){
    el.addEventListener('click', function(){
        let menu = el.parentNode.parentNode.querySelector('.task-menu');
        menu.classList.toggle('display-block');
        menu.tabIndex = -1;
        menu.focus();
    });
});
// Hide on blur
Array.from(container.querySelectorAll('.task-menu')).forEach(function(el){
    el.addEventListener('blur', function(){
        el.classList.remove('display-block');

    }, true);
});

<button id="drop" onclick="drop();">Drop down</button>
<div id="menu">
    <!-- content here-->
</div>

var button = document.querySelector('#drop');//or any other selector like getElementBy...
var menu = document.querySelector('#menu');
function drop() {
    setTimeout(function() {
        menu.style.display="block";
        button.setAttribute('onclick', 'hide();');
    }, 10);
};

 function hide() {};
document.addEventListener('click', function() {
    menu.style.display="none";
});