根据当前状态删除按钮

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

假设您希望 #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>

Answer 2

您可以只使用一个按钮和一个布尔值来跟踪状态 (showing/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>

根据当前状态删除按钮

Remove button based on current state

html

javascript

button

hide