Question

我不确定，我应该使用什么，请帮忙

$(document).ready(function() {
  $('#btn2').hide()
  $("#btn1").click(function () {
   $("#btn2").show()
  });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button id="btn1">BTN 1</button>
  <button id="btn2">BTN 2</button>
</div>

Answer 1

$(document).ready(function() {
  $('#btn2').hide()
  $("#btn1").click(function () {
   $("#btn2").toggle()
  });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button id="btn1">BTN 1</button>
  <button id="btn2">BTN 2</button>
</div>

Answer 2

您可以使用切换 https://api.jquery.com/toggle/

$(document).ready(function() {
  $('#btn2').hide()
  $("#btn1").click(function () {
   $("#btn2").toggle()
  });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button id="btn1">BTN 1</button>
  <button id="btn2">BTN 2</button>
</div>

Answer 3

将其隐藏在 HTML 或 CSS 中，然后 toggle 它

$(function() {
  $("#btn1").on("click", function() {
    $("#btn2").toggle()
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button id="btn1">BTN 1</button>
  <button id="btn2" hidden>BTN 2</button>
</div>

Answer 4

您应该使用 $("#btn2").toggle() 而不是 $("#btn2").show()，或者您可以添加一个 if 条件来检查按钮是否可见。

单击时我想显示按钮，再次单击时我想隐藏一个按钮

4 个答案: