在加載頁面上隱藏元素並在單擊時顯示

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>