javascript - 隐藏/显示按钮在 jquery 中不起作用

Question

我需要以下代码的帮助，我创建了一个按钮来显示和隐藏一个 div。我对它应用了一些 jQuery。对我来说一切似乎都很好，但仍然无法正常工作，我似乎找不到原因？

$(document).ready(function() {

  $("#closeButton").click(function() {
    if ($("#closeButton").val() == "Close Drawer") {
      $("#topDrawer").hide();
      $("#closeButton").val("Open Drawer");
    }
    if ($("#closeButton").val() == "Open Drawer") {
      $("#topDrawer").show();
      $("#closeButton").val("Close Drawer");
    }
  });

});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jumbotron" id="topDrawer">
  <span id="appName">App Name<span>
</div>
<input type="button" value="Close Drawer" class="btn btn-primary btn-sm" id="closeButton" />

标签： javascriptjqueryhtml

Answer 1

你需要一个 else 块。你的两个 if 条件一个接一个地运行。利用

if ($("#closeButton").val() == "Close Drawer") {
      $("#topDrawer").hide();
      $("#closeButton").val("Open Drawer");
}
else if ($("#closeButton").val() == "Open Drawer") {
      $("#topDrawer").show();
      $("#closeButton").val("Close Drawer");
}