在 Javascript 中为响应式菜单添加和删除事件侦听器答案

【问题标题】：Adding and removing event listeners in Javascript for a responsive menu在 Javascript 中为响应式菜单添加和删除事件侦听器
【发布时间】：2020-06-10 14:25:46
【问题描述】：

我编写了一个函数，当用户单击菜单图标时，它会显示/隐藏菜单。我希望它在用户单击菜单外的任何位置时隐藏菜单，并在用户单击图标时再次打开。

到目前为止，菜单默认是关闭/隐藏的，所以当我单击菜单图标时，菜单会打开，当我在菜单打开时单击图标时，它会关闭。我想通过单击菜单图标或屏幕上的任意位置来关闭菜单。

我可以在 else 语句中添加事件侦听器以在用户单击屏幕时关闭菜单吗？以及如何在用户第一次点击后移除事件监听器？

function smallMenu() {
    var x = document.getElementById("buttons");
    if (x.className === "optionBar") {
        // opens the menu
        x.className += " responsive";
    } else {
        // closes the menu
        x.className = "optionBar";
    }
}

HTML：

<div class="optionBar" id="buttons">
            <div id="containerSelector" class="align">
                <!-- options for screen display -->
                <div id="elementSelector" class="displayOptions"style="border: 3px solid green;">
                    <!-- group by system -->
                    <button onclick="">
                        <span class="butIcon">
                            <i class="fas fa-columns"></i>
                        </span>Group by System
                    </button>

                    <!-- hide graphs-->
                    <button onclick="toggleGraphsFunction()">
                        <span class="butIcon">
                            <i class="fas fa-chart-line"></i>
                        </span><span id="butName">Hide Graphs</span>
                    </button>
                </div>
                <!--refresh and elipsis container-->
                <div class="displayOptions2"style="border: 3px solid red;">
                    <!-- refresh icon -->
                    <a href="#" class="refresh">
                        <i class="fa fa-redo"></i>
                    </a>
                    <!-- elipsis menu for small screens-->
                    <a href="javascript:void(0);" class="icon" onclick="menuSmall()">
                        <i class="fas fa-ellipsis-v"></i>
                    </a>
                </div>
            </div>
        </div>

【问题讨论】：

你能提供一些基本的HTML吗？
您应该使用classList 方法来检查、添加或删除类名。
@theblackgigant 使用 classList 和 className 有什么区别？
@zfrisch 我添加了一些 html，我不确定这是否足以提供帮助
@user12324017 它确保您不会意外删除所需的类名。而且它也有助于提高可读性，classList.add("something") 告诉我它正在添加一个类名，但使用 className += "something" 需要一秒钟才能意识到它的作用。

标签： javascript menu dom-events addeventlistener removeeventlistener

【解决方案1】：

还有一件事，你还没有在菜单中添加 id "buttons"。

document.getElementById("bodyId").addEventListener("click", function(){
document.getElementById("buttons").classList.add("hideButton");
});

.hideButton{
  display: none;
}

<body id=bodyId>
<!--Rest of the code goes here-->
</body>

【讨论】：

如果我使用这种方法，如何确保再次点击图标时菜单关闭？

【解决方案2】：

我建议为包装页面的元素添加一个点击处理程序 - 我已经在 codepen 上制作了一个演示 - 添加了演示的动画 gif 以防 codepen 不合作

    (function () {
  const els = {
    page: document.querySelector("#page"),
    sidebar: document.querySelector("#sidebar"),
    content: document.querySelector("#content"),
    wrapper4: document.querySelector("#wrapper4")
  };
  const handleSidebarClick = (el) => {
    console.log("sidebar click");
    el.style.background = getRandomColor();
    els.wrapper4.innerText = "Wootwoot, You Clicked the Sidebar!";
  };

  const handleClickOutside = (id) => {
    console.log("outside sidebar click", id);
    els.sidebar.style.background = "rgba(251, 131, 0, 0.2)";
    els.wrapper4.innerText = "Hey Now, You Clicked the " + id + " !";
  };

  const getRandomColor = () => {
    var letters = "0123456789ABCDEF";
    var color = "#";
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  };

  els.page.addEventListener(
    "click",
    (e) => {
      if (e.target.id === 'sidebar') {
        handleSidebarClick(e.target);
      } else if (e.target.id !== 'sidebar') {
        handleClickOutside(e.target.id);
      }
      // e.target.id === "sidebar" ? handleSidebarClick(e.target) : handleClickOutside(e.target.id);
    }
  );

  els.page.removeEventListener("click", handleSidebarClick);
})();

【讨论】：