Question

你好，我正在使用 javascript 来显示和隐藏元素。它可以工作，但是在加载页面时，元素仍然可见，直到我单击按钮，然后它才会隐藏。在我的情况下，我需要相反的（在我点击按钮之前，该元素在加载页面上不应该可见）这是我的代码：

<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>


(function($){


$(document).ready(function(){
$('#hideshow').click(function(){
    $('.price-rules-table-wrapper').toggle('show');
  });
});


})(jQuery);

我错过了什么吗？

Answer 1

应用display:none：

(function($) {
  $(document).ready(function() {
    $('#hideshow').click(function() {
      $('.price-rules-table-wrapper').toggle('show');
    });
  });
})(jQuery);

div {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>

或者，您可以在页面加载时以编程方式隐藏它：

 $('.price-rules-table-wrapper').hide();
(function($) {
  $(document).ready(function() {
    $('#hideshow').click(function() {
      $('.price-rules-table-wrapper').toggle('show');
    });
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>

在加载页面上隐藏元素并在单击时显示

1 个答案: