Question

我对如何使用原始javascript创建菜单感到有些困惑，这些菜单与bootstrap dropdown类似，并且具有以下交互作用：

单击按钮并显示下拉列表
再次单击并隐藏下拉列表
将重点放在下拉菜单上并将其隐藏

我正在进行一系列测试，但找不到引导程序！

有人对它如何工作有任何想法？

我所拥有的：

HTML：

<!-- Menu button -->
<div class="flex align-items-center menu-btn">
    <i class="material-icons task-more flex justify-content-center align-items-center" data-toggle="hola">more_horiz</i>
</div>
<!-- Menu -->
<div class="task-menu">
    <div class="task-menu-item flex align-items-center">
        <i class="material-icons">alarm</i>
        <span>Alarms</span>
    </div>
    <div class="task-menu-item flex align-items-center">
        <i class="material-icons">edit</i>
        <span>Edit</span>
    </div>
    <div class="task-menu-item flex align-items-center">
        <i class="material-icons">delete</i>
        <span>Delete</span>
    </div>
</div>

JS：

// 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);
});

谢谢！

Answer 1

<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";
});

创建切换菜单原始JavaScript

1 个答案: