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

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

提问by Alexander Richard

I'm gonna use two buttons in one page. Something like when we click on first one then second button will be appeared instead on first one and if we click on second one then first one will be appeared. without losing function of the button.

我将在一页中使用两个按钮。就像当我们点击第一个然后第二个按钮将出现在第一个上时，如果我们点击第二个，那么第一个将出现。而不会失去按钮的功能。

here is my button code:

这是我的按钮代码：

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

For example:

例如：

Test 1is default, and test 2is hidden, if we click on test 1then test 1will disappear and instead test 2will be appeared and again if we click on test 2then it will be disappeared and instead test 1will be appeared. without losing onclick function of these two buttons.

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

Here is my toggle menu function, if we click on test 1 button then this page: togglemenu.phpwill open and if we click on test 2, then togglemenu2.phpwill open as well.

这是我的切换菜单功能，如果我们点击 test 1 按钮，那么这个页面：togglemenu.php将打开，如果我们点击 test 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
})

How to make it?

如何制作？

Thanks in advance.

提前致谢。

回答by Eric Phillips

By without losing the function of the button, I assume you mean that you want to keep the menu toggle. What you need to do is define your own function, and inside that function, toggle your menu AND perform the show/hide that you desire.

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

Under the assumption that you are new to javascript, I wrote this example to be straightforward.

假设您是 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>

回答by dwhieb

Another possibility you might consider is, rather than hiding/unhiding buttons, you could use JavaScript to change the look and functioning of the button dynamically.

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

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>

The way in which you hide or display the different menus could follow a similar approach as well. So you could have a toggleButtonfunction, and inside that function, call a toggleMenufunction.

隐藏或显示不同菜单的方式也可以采用类似的方法。所以你可以有一个toggleButton函数，在这个函数中，调用一个toggleMenu函数。

回答by hirosmans

i think if your using Jqueryit's better create a hidden css class

我认为如果您使用Jquery它最好创建一个隐藏的 css 类

.hidden {
  display: none;
}

and remove or add with method .addClass() or .removeClass()

并删除或添加方法 .addClass() or .removeClass()

Example:

例子：

html file:

html文件：

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

js file

js文件

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