Question

我一直潜伏着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'）并进行必要的调整来完成，但是，我的尝试再次失败了。

先谢谢。

Answer 1

如果您可以使用jQuery和某些css，那么您将获得所需内容 使用JAVASCRIPT更新

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>

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

1 个答案: