單擊另一個按鈕后如何隱藏和顯示一個按鈕？

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> 

Answer 2

您可能考慮的另一種可能性是，可以使用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> 

隱藏或顯示不同菜單的方式也可以采用類似的方法。 因此，您可以有一個toggleButton函數，然后在該函數內部調用toggleMenu函數。

Answer 3

我認為如果您使用Jquery ，最好創建一個隱藏的CSS類

.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');
});