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

你可以只使用一个按钮和一个布尔来跟踪状态（显示/隐藏）：

＆＃13;

$(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
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

根据当前状态删除按钮

2 个答案: