JavaScript:关于在打开/关闭菜单时改进此代码的任何提示

JavaScript: any tips on improving this code on opening/closing menu?

本文关键字：代码 提示 任何 JavaScript 菜单      更新时间：2023-09-26

我潜伏w3schools并研究javaScript已经有一段时间了。几天来，我一直在为一个代码而挣扎，该代码的功能是打开，然后再次点击关闭打开的菜单。我不能用一首单曲做到这一点，但我用两首歌做到了。

我用以下方法做到了这一点：

<div id="menuClosed" style="background: blue; color: white; width: 500px; height: 50px; transition: 0.3s">
    <p id="menuString" style="margin: auto; text-align:center;">
        Click on the button to open the menu
    </p>
    <button id="menuButton" onclick="changeStyle('Closed')" style="margin-left:250px;">Open</button>
    <div>
        <p style="font-size: 30px; text-align:center;">Bonefish</p>
    </div>
    <button id="menuButton2" onclick="changeStyle('Open')" style = "margin-left:250px; display: none;">Close</button>
</div>
<script>
    function changeStyle(idMenu) {
        //compresses OPEN and CLOSE buttons ID into a var
        var menuButton = document.getElementById("menuButton");
        var menuBotton2 = document.getElementById("menuButton2");
        //Compresses menu DIV's ID into a var
        var menuConfig = document.getElementById("menu" + idMenu);
        //styles that will serve as factor for opening/closing the menu
        var style1 = "background: blue; color: white; width: 500px; height: 50px; transition: 0.3s";
        var style2 = "background: blue; color: white; width: 500px; height: 150px; transition: 0.3s";
        //opens Menu and changes ID to "menuOpen"
        if (idMenu === "Closed") {
            menuConfig.style = style2;
            menuConfig.id = "menuOpen";
            menuButton.style = "display: none; margin-left:250px;";
            menuButton2.style = "margin-left:250px; display: initial;"
        }
        //Closes menu and chages ID to "menuClosed"
        if (idMenu === "Open") {
            menuConfig.style = style1;
            menuConfig.id = "menuClosed";
            menuButton.style = "display: initial; margin-left:250px;";
            menuButton2.style = "margin-left:250px; display: none;";
        }
    }
</script>

我真正想做的是用同一个按钮打开和关闭菜单，但我不知道怎么做。

我相信可以通过将<button id="menuButton" onclick="changeStyle('Closed')" style="margin-left:250px;">Open</button> changeStyle（"Closed"）更改为changeStyle（"Open"）并进行必要的调整来完成，但我的尝试再次失败。

提前谢谢。

如果你可以使用jQuery和一些css，你会得到你想要的使用Java脚本更新

var divmenu=document.getElementById('menu');
function toggleMenu(btn){
    if(btn.className=='open'){
        btn.className='close';
        divmenu.className='close';
        btn.innerText='Open';
    }else{
        btn.className='open';
        divmenu.className='open';
        btn.innerText='Close';
    }
}
div{
   padding:10px 0; 
   color: white; 
   transition: 0.3s;   
   background: blue;
}
div.open{   
  height: 150px; 
  
}
div.close{ 
  height: 20px;   
  overflow:hidden;
}
<div id="menu" class="close">
    <p id="menuString" style="margin: auto; text-align:center;">
        Click on the button to open the menu
    </p>
    <p style="font-size: 30px; text-align:center;">Bonefish</p>
</div>
<p style="text-align:center; margin:0; padding:5px 0;"><button type="button" class="close" onclick="toggleMenu(this);">Open</button></p>

相关文章：