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

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 然后 test 1 将消失，取而代之的是 test 2 将出现，如果我们再次单击 test 2 然后它将消失，取而代之的是 test 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

在不失去按钮功能的情况下，我假设您的意思是要保持菜单切换。您需要做的是定义您自己的函数，并在该函数内切换您的菜单并执行您想要的 show/hide。

假设你是新手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>

Answer 2

您可能会考虑的另一种可能性是，您可以使用 JavaScript 来动态更改按钮的外观和功能，而不是 hiding/unhiding 按钮。

function toggle(ev) {
  ev.target.dataset.state = ev.target.dataset.state === 'menu1' ? 'menu2' : 'menu1';
  ev.target.textContent = ev.target.textContent === 'Test 1' ? 'Test 2' : 'Test 1';
  if (ev.target.dataset.state === 'menu1') {
    // Add code to display Menu 1 here.
  } else if (ev.target.dataset.state === 'menu2') {
    // Add code to display Menu 2 here.
  }
}

document.querySelector('button').addEventListener('click', toggle);

<button type=button name=toggleButton data-state=menu1>Test 1</button>

隐藏或显示不同菜单的方式也可以遵循类似的方法。所以你可以有一个 toggleButton 函数，并在该函数内部调用一个 toggleMenu 函数。

Answer 3

我认为如果你使用 Jquery 最好创建一个隐藏的 css class

.hidden {
  display: none;
}

并使用方法 .addClass() or .removeClass()

删除或添加

示例：

html 文件：

<button id="hideMenu" class="sideviewtoggle myButton">Test 1</button>

js文件

$('#hideMenu').on('click', function() {
  $('#menu-to-hide').addClass('hidden');
  //or
  $('#menu-to-show').removeClass('hidden');
});

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

how to hide and show one button after clicked on another button?

javascript

jquery

button

buttonclick