javascript - 在使用原生 JavaScript 的点击事件监听器期间，是否有更简洁的方法来调用多个切换和元素？

Question

我在单击/eventListener 期间同时调用了多个切换，它可以工作，但我想知道是否有一种更简洁的方法来编写看起来不那么重复的代码。
这是我试图重构/清理的代码片段。非常感谢任何帮助或指出正确方向。谢谢!

document.getElementById("menu-toggle").addEventListener("click", mobileMenuToggle);

function mobileMenuToggle() {
    var hideMenu = document.getElementById("mobile-menu-container");
        hideMenu.classList.toggle("hide-menu");

    var hideMenuIcon = document.getElementById("menu-toggle");
        hideMenuIcon.classList.toggle("hide-menu-icon");

    var closeMenuIcon = document.getElementById("close-menu-toggle");
        closeMenuIcon.classList.toggle("show-close-icon");

    var closeMenuIcon = document.getElementById("container-bg-toggle");
        closeMenuIcon.classList.toggle("show-icon-bg");
}

Answer 1

很少有其他选择

为了使其更简洁，您可以摆脱不重用的引用

function mobileMenuToggle() {
  document.getElementById("mobile-menu-container").classList.toggle("hide-menu");
  document.getElementById("menu-toggle").classList.toggle("hide-menu-icon");
  document.getElementById("close-menu-toggle").classList.toggle("show-close-icon");
  document.getElementById("container-bg-toggle").classList.toggle("show-icon-bg");
}

如果这些元素是嵌套的，您可以只编写一个 css 规则并进行一次切换

#mobile-menu-container.hide-menu .menu-toggle {
  display:none;
}

#mobile-menu-container.hide-menu .close-menu-toggle {
  display:block;
}

你可以单独切换父容器

 function mobileMenuToggle() {
   document.getElementById("mobile-menu-container").classList.toggle("hide-menu");
 }

如果您使用的是 jquery，则可以使用 jquery 切换，它有点短

$('#mobile-menu-container').toggleClass('hide-menu');