javascript - 单击另一个按钮后如何隐藏和显示一个按钮？

Question

我将在一个页面中使用两个按钮。就像当我们单击第一个按钮时，将出现第二个按钮，而不是第一个按钮，如果我们单击第二个按钮，则会出现第一个按钮。不会失去按钮的功能。

这是我的按钮代码:

<button id="button1" onclick="menu2.toggle()" class="sideviewtoggle myButton">Test 1</button>
<button id="button2" onclick="menu3.toggle()" class="sideviewtoggle myButton">Test 2</button>

例如:

测试1是默认的，测试2是隐藏的，如果我们点击测试1然后测试1> 将消失，而测试 2 将出现，如果我们再次单击测试 2，那么它将消失，而测试 1 将出现出现了。又不失去这两个按钮的onclick功能。

这是我的切换菜单功能，如果我们单击测试 1 按钮，则此页面:togglemenu.php 将打开，如果我们单击测试 2，则将打开 togglemenu2.php

jQuery(function(){
menu2 = new sidetogglemenu({  
id: 'togglemenu2', 
position: 'right',
source: 'togglemenu.php', 
revealamt: -5
})

jQuery(function(){
menu3 = new sidetogglemenu({  
id: 'togglemenu3', 
position: 'right',
source: 'togglemenu2.php', 
revealamt: -5
})

如何制作？

提前致谢。

Answer 1

通过不失去按钮的功能，我假设您的意思是您想要保留菜单切换。您需要做的是定义自己的功能，并在该功能内切换菜单并执行您想要的显示/隐藏。

假设您是 JavaScript 新手，我编写此示例是为了简单明了。

//With a function, I am able to perform multiple tasks 
function SwitchButtons(buttonId) {
  var hideBtn, showBtn, menuToggle;
  if (buttonId == 'button1') {
    menuToggle = 'menu2';
    showBtn = 'button2';
    hideBtn = 'button1';
  } else {
    menuToggle = 'menu3';
    showBtn = 'button1';
    hideBtn = 'button2';
  }
  //I don't have your menus, so this is commented out.  just uncomment for your usage
  // document.getElementById(menuToggle).toggle(); //step 1: toggle menu
  document.getElementById(hideBtn).style.display = 'none'; //step 2 :additional feature hide button
  document.getElementById(showBtn).style.display = ''; //step 3:additional feature show button


}

<button id="button1" onclick="SwitchButtons('button1');" class="sideviewtoggle myButton">Test 1</button>
<button id="button2" onclick="SwitchButtons('button2');" class="sideviewtoggle myButton" style='display:none;'>Test 2</button>