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

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也会显示菜单。 因此单击“关闭”按钮将关闭菜单，然后再次打开它。

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

 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会干扰可访问性。 考虑使用 static 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>

Answer 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 function 从打开菜单更改为关闭菜单。

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2022-02-20 02:24:02

解决方案2
1 2022-02-20 07:22:42

解决方案3
0 2022-08-10 14:08:15

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2022-02-20 02:24:02

解决方案2 1 2022-02-20 07:22:42

解决方案3 0 2022-08-10 14:08:15

解决方案1
1 已采纳 2022-02-20 02:24:02

解决方案2
1 2022-02-20 07:22:42

解决方案3
0 2022-08-10 14:08:15