javascript - 根据当前状态删除按钮

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>