根據當前狀態刪除按鈕

Question

如果內容顯示/未顯示，請嘗試刪除按鈕的顯示，請參閱下面的代碼。

<div id="bottomdrawer" class="mui--no-user-select"> 
     <button id="hide">hide</button> 
     <button id="show">show</button> 
     <div class="bottom-menu" id="bottommenu"> 
      <ul> 
       <li><a href="#">Inbox (1)</a></li> 
       <li><a href="#">Friends</a></li> 
       <li><a href="#">Add a Spot</a></li> 
       <li><a href="#">Community Forum</a></li> 
      </ul> 

      <button type="button" name="button">Upgrade to Premium</button> 
     </div> 
    </div> 

和

$("#hide").click(function(){ 
     $("#bottommenu").hide(); 
    }); 
    $("#show").click(function(){ 
     $("#bottommenu").show(); 
    }); 

如果內容被示出，取出節目按鈕時，如果內容被隱藏顯示的隱藏按鈕。

Answer 1

你可以只用一個按鈕和一個布爾跟蹤做的狀態的（顯示/ hidding）：

$(document).ready(function() { 
 
    var state = true;       // record which state are we on (are we showing or hiding). 
 
    $("#toggle").click(function() {   // on click of the toggle button 
 
     state = !state;      // invert the state 
 
     $("#bottommenu").toggle(state);  // change the visibility of the menu accordingly 
 
     $(this).text(state? "HIDE": "SHOW"); // change the text of the button accordingly 
 
    }); 
 
});

#bottommenu { 
 
    width: 200px; 
 
    height: 100px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button id="toggle">HIDE</button> 
 
<div id="bottommenu"></div>

Answer 2

假設你想要的#bottommenu內容進行初步顯示出，這個你想要做什麼：

// Initially hide the show button 
 
$("#show").hide(); 
 

 
$("#hide").click(function(){ 
 
    $("#bottommenu, #hide").hide(); 
 
    $("#show").show(); 
 
}); 
 

 
$("#show").click(function(){ 
 
    $("#bottommenu, #hide").show(); 
 
    $("#show").hide(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="bottomdrawer" class="mui--no-user-select"> 
 
    <button id="hide">hide</button> 
 
    <button id="show">show</button> 
 
    <div class="bottom-menu" id="bottommenu"> 
 
    <ul> 
 
     <li><a href="#">Inbox (1)</a></li> 
 
     <li><a href="#">Friends</a></li> 
 
     <li><a href="#">Add a Spot</a></li> 
 
     <li><a href="#">Community Forum</a></li> 
 
    </ul> 
 
    <button type="button" name="button">Upgrade to Premium</button> 
 
    </div> 
 
</div>