Javascript window.addEventListener函数始终不工作

通过这段代码，当用户在按钮外单击时，我必须隐藏下拉列表容器。代码最初运行良好。但稍后，它也不会响应按钮上的onclick事件。有时，如果我点击一个按钮，它会关闭下拉列表。我试过很多问题，但没有得到答案。这是我的密码。希望有人能解决这个问题

            <div class="button-grp">
                <button class="icon-button" type="button" onclick="menu(event, '1')"><img 
                   src="../../Images/icons/local_library-white-24dp.svg" class="icon"><br>Learning
                 </button>
                <button class="icon-button" type="button"  onclick="menu(event, '2')"><img 
                    src="../../Images/icons/gamepad-white-24dp.svg" class="icon"><br>Tools
                </button>
            </div>
        <div class="sidebar-open">
            <div class="main-options" id="0">
                <button class="options-button" type="button">Academics</button>
                <div class="dropdown-container">
                    <a href="#">Course Details</a>
                    <a href="#">Assignments</a>
                </div>
                <button class="options-button" type="button">Schedule</button>
                <div class="dropdown-container">
                    <a href="#">Exams</a>
                    <a href="#">Classes</a>
                </div>
            </div>
      </div>
     <div id="mainmenu">
            Lorem ipsum dolor sit, 
     </div>

学问

工具
学者
日程
Lorem ipsum dolor sit，

我的Javascript代码如下所示

//function to toggle between clicked buttons and close when double clicked on it.
function menu(evt, id) {
  document.querySelectorAll(".main-options").forEach(function(div) {
    if (div.id === id) {
            // Toggle specified DIV
            if(div.style.display === "block"){
                div.style.display = "none";
                document.getElementById("mainmenu").style.marginLeft = "80px";
                document.body.style.backgroundColor = "#fff";
            }else{
                div.style.display = "block";
                document.getElementById("mainmenu").style.marginLeft = "230px";
                document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
            }
    } else {
      // Hide other DIVs
      div.style.display = "none";
    }
  });
}
//function to hide the dropdown when clicked outside the button.
window.addEventListener('click', function(event){
    if (!event.target.matches('.icon-button') ){
    var dropdowns = document.getElementsByClassName("main-options");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
        if (dropdowns[i].style.display === "block") {
        dropdowns[i].style.display ="none";
        document.getElementById("mainmenu").style.marginLeft = "80px";
        document.body.style.backgroundColor = "#fff";

        }
    }
    }
});

//在单击按钮和双击按钮时关闭按钮之间切换的函数。
功能菜单（evt，id）{
document.queryselectoral（“.main options”）.forEach（函数（div）{
如果（div.id==id）{
//切换指定的DIV
如果（div.style.display==“块”）{
div.style.display=“无”；
document.getElementById（“主菜单”）.style.marginLeft=“80px”；
document.body.style.backgroundColor=“#fff”；
}否则{
div.style.display=“块”；
document.getElementById（“主菜单”）.style.marginLeft=“230px”；
document.body.style.backgroundColor=“rgba（0,0,0,0.4）”；
}
}否则{
//隐藏其他分区
div.style.display=“无”；
}
});
}
//函数在按钮外单击时隐藏下拉列表。
window.addEventListener（'click'，函数（事件）{
如果（！event.target.matches（'.icon按钮'））{
var dropdowns=document.getElementsByClassName（“主选项”）；
var i；
对于（i=0；i

为什么不试试这个：

document.addEventListener("DOMContentLoaded", () => {
  document.querySelector(".icon-button").forEach((button) => {
    button.addEventListener('click', ()=>{
      ...
    });
  });
});

---

试试文档。AddEventListener是的，我试过了。但问题仍然存在…点击事件是否首先触发？因为在您提到的问题描述中，它有时会关闭。可能是单击事件中的条件不符合要求。是的，我也测试过。因为问题是在我添加窗口后才出现的。添加…块。我想当光标放在按钮标记中显示的图像上时，它将关闭。怎么解决这个问题？嘿..谢谢你抽出时间。。但我想在按钮外单击时关闭下拉容器。我想我可能已经听过全球点击事件。。。