当我点击菜单按钮时它打开菜单但是当我点击关闭按钮时它没有关闭它答案

【问题标题】：When i click on menu button it open menu but when i click close button its not closing it当我点击菜单按钮时它打开菜单但是当我点击关闭按钮时它没有关闭它
【发布时间】：2022-08-10 22:08:15
【问题描述】：

我在做菜单一个网站的按钮，所以当我点击菜单时，它会改变它的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>

标签： javascript html menu

【解决方案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>";
  }
}

&lt;div id="MENU"&gt;&lt;p onclick="TOGGLEMENU()"&gt;Menu&lt;/p&gt;&lt;/div&gt;

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

我的解决方案：-

HTML :-

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/index.js"></script>
  <title>SITE</title>
</head>
<body>
    <div id="Menu"><button onclick="Menu();" id="Imenu" >MENU</button></div>
</body>
</html>

JS：-

//Menu opening


function Menu() {
 var btn=document.getElementById("Menu");
 btn.innerHTML="<button onclick='oldstagemenu();' id='Imenu' ><a href='your-File.html'>OUR WORKS</a> | <a href='your-File.html'>ABOUT US</a> | <a href='Your-File.html'>CONTACT-US</a> | CLOSE-MENU❌</button>"
 
}

//Menu closing


function oldstagemenu() {
 var btn=document.getElementById("Menu");
 btn.innerHTML="<button onclick='Menu();' id='Imenu' >MENU</button>"
 
}

只需将 onclick 功能从打开更改为关闭菜单。

【讨论】：