如何切换按钮？

Question

我创建了一个小代码，其中有一个 "添加借记卡或信用卡 "按钮。我默认隐藏了该按钮内的所有内容。

当点击按钮时，我想显示内容，当点击按钮时，我又想隐藏内容。

在我的代码中，当我点击按钮时，它就会消失，而且没有再次切换的选项。

$('#addNewCard').hide();
$('#addCard').click(function () {
   $('#addNewCard').show();
   $('#addCard').toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn-cal" id="addCard">Add a debit or credit card</button>

<div id="addNewCard">
  <p>Card details here</p>
</div>

Answer 1

$('#addCard').toggle();

将切换的可见性 #addCard这是你的按钮。

它应该只是。

$('#addCard').click(function () {
    $('#addNewCard').toggle();
});

Answer 2

不应该隐藏按钮，而是改变按钮的文字，也可以用... .toggle() 对于 $('#addNewCard'):

$('#addNewCard').hide();
$('#addCard').click(function() {
  $('#addNewCard').toggle();
  $('#addCard').text($('#addCard').text() === "Hide Debit Card" ? "Add a debit or credit card" : "Hide Debit Card");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn-cal" id="addCard">Add a debit or credit card</button>

<div id="addNewCard">
  <p>Card details here</p>
</div>

Answer 3

使用jQuery，我建议你使用css display none隐藏#addNewCard元素，然后用javascript正确切换可见性。

$('#addCard').click(function () {
   $('#addNewCard').toggle();
});

$('#addCard').click(function () {
   $('#addNewCard').toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" id="addCard">Add a debit or credit card</button>
<div id="addNewCard" style="display:none;">
  <p>Card details here</p>
</div>