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

更改按钮文本，而不是隐藏按钮，还对.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 2

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

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

应该是：

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

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>

如何切换按钮？

3 个答案: