当我点击菜单按钮时它会打开菜单但是当我点击关闭按钮时它不会关闭它

Question

我在做菜单一个网站的按钮，所以当我点击菜单时，它改变了它的 innerhtml 但是当我点击关闭按钮时它没有改变它的 innerhtml。

js代码

function MENU() {
var MENUITEMS = document.getElementById('MENU')
MENUITEMS.innerHTML=" <a style='text-decoration:none;' href='OUR_WORKS.html'>OUR_WORKS</a><p class='LGND'>ABCD</p><button id='CLOSE'class='LGND' onclick='CLOSE()'>CLOSE_MENU</button>"
}
function CLOSE() {
var MENUITEMS = document.getElementById('MENU')
MENUITEMS.innerHTML="  <p onclick='MENU()' id='MENU'>MENU</p>"
}

Html代码

 <p onclick="MENU()" id="MENU" 
 >MENU</p>

Answer 1

每次单击容器 #MENU 时，它都会显示菜单。问题是 即使菜单打开，单击 #MENU 也会显示菜单。所以点击“关闭”按钮会关闭菜单，然后再打开。

解决此问题的一种方法是将菜单的状态存储在变量中 - 如下所示：

var OPEN = false,
  MENU_ELEM = document.getElementById("MENU");

function TOGGLEMENU(){
  if(OPEN){
    //menu is open, we need to close it
    OPEN = false;
    MENU_ELEM.innerHTML = "<p onclick='TOGGLEMENU()'>MENU</p>";
  } else {
    //menu is closed, we need to open it
    OPEN = true;
    MENU_ELEM.innerHTML =  "<a style='text-decoration:none;' href='OUR_WORKS.html'>OUR_WORKS</a><p class='LGND'>ABCD</p><button id='CLOSE'class='LGND' onclick='TOGGLEMENU()'>CLOSE_MENU</button>";
  }
}

<div id="MENU"><p onclick="TOGGLEMENU()">Menu</p></div>

Answer 2

参见下面的示例。

几点建议：

p 标签不适用于按钮。请改用 button 元素。
纯粹通过 JavaScript 换出 innerHTML 会影响可访问性。考虑使用静态 HTML 标记和 CSS 样式来实现效果。

const btn = document.querySelector('button');
const menu = document.querySelector('ul');

btn.addEventListener('click', toggle);

function toggle() {
  menu.classList.toggle('active');
  btn.classList.toggle('active');
}

ul {
  opacity: 0;
  transform: translateX(-20px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
ul.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

button.active::after {
  content: ' X';
}

<button>MENU</button>
<ul>
  <li>
    <h2>Our Works</h2>
  </li>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

当我点击菜单按钮时它会打开菜单但是当我点击关闭按钮时它不会关闭它

When i click on menu button it open menu but when i click close button its not closing it

html

javascript

menu