javascript - 顯示和隱藏

Question

我正試圖創建一個顯示&隱藏切換頁面加載時隱藏的元素。 那麼遠，

.incl { 
 
\t position: absolute; 
 
\t z-index: 800; 
 
\t background-color: #00689C; 
 
\t text-align: left; 
 
\t padding:0 5px 5px 5px; 
 
\t color: #ffffff; 
 
\t font-size:1em; 
 
\t border-radius:3px; 
 
\t line-height:1.4em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script> 
 
\t $(document).ready(function(){ 
 
\t \t $("button").click(function(){ 
 
\t \t \t $("#incl").toggle(1000); 
 
\t \t }); 
 
\t }); 
 
</script> 
 

 
<button>INCLUDES</button> 
 
    <div id="incl"> 
 
    <ul class="incl"> 
 
     <li>bla bla</li> 
 
     <li>bla ti bla</li> 
 
     <li>bla bla bla</li> 
 
\t </ul> 
 
    </div>

這裏的問題是內容的負載，因爲我得到的頁面。我需要另一種方式。

Answer 1

添加#incl { display: none; }和$("button").click(function(){ ... $(this).hide(); });

#incl { 
 
    display: none; 
 
} 
 

 
.incl { 
 
\t position: absolute; 
 
\t z-index: 800; 
 
\t background-color: #00689C; 
 
\t text-align: left; 
 
\t padding:0 5px 5px 5px; 
 
\t color: #ffffff; 
 
\t font-size:1em; 
 
\t border-radius:3px; 
 
\t line-height:1.4em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script> 
 
    $(document).ready(function(){ 
 
     $("button").click(function(){ 
 
      $("#incl").toggle(1000); 
 
      $(this).hide(); 
 
     }); 
 
    }); 
 
</script> 
 

 
<button>INCLUDES</button> 
 
<div id="incl"> 
 
    <ul class="incl"> 
 
     <li>bla bla</li> 
 
     <li>bla ti bla</li> 
 
     <li>bla bla bla</li> 
 
\t </ul> 
 
</div>

Answer 2

添加 #incl {顯示：無;} 到CSS