css onclick在頁面底部顯示div

Question

我構建了一個簡單的頁面，無需向下滾動查看所有內容。

我有一些內容要顯示在底部，但我不希望它在第一次顯示。

我想讓用戶單擊一個短語即可看到此內容。

該短語將首先定位在頁面的底部，然後在點擊後會稍微上升一點，爲現在顯示的隱藏內容留出空間。

如果你明白我的意思，這個內容會從下往上顯示，就像是一個「反向下拉菜單」。

這是我的HTML。 「點擊顯示」h3是單擊時會顯示隱藏內容（四個按鈕）的短語。

<div class="row text-center"> 

     <h3 id="click-show">Click here to see the buttons.</h3> 

     <hr class="spacer"> 

      <div class="col-md-3 col-xs-12"> 
      <section> <a href="#"><button> 
         <h1>Button 1</h1> 
        </button></a> </section> 
      </div> 

      <div class="col-md-3 col-xs-12"> 
      <section> <a href="#"><button> 
         <h1>Button 2</h1> 
        </button></a> </section> 
      </div> 

      <div class="col-md-3 col-xs-12"> 
      <section> <a href="#"><button> 
         <h1>Button 3</h1> 
        </button></a> </section> 
      </div> 

      <div class="col-md-3 col-xs-12"> 
      <section> <a href="#"><button> 
         <h1>Button 4</h1> 
        </button></a> </section> 
      </div> 

     </div> 

我是初學者，我真的不知道是否可以通過使用CSS或其他語言來完成。

任何幫助/提示，​​將不勝感激！多謝你們 ！

Answer 1

使用jQuery。

• $(document).ready - 函數接受回調函數並在文檔加載時觸發它。
• $('#click-show').click - 函數接受回調函數並在單擊標識爲click-show的元素時觸發它。
• $('div.hide-show').toggle()如果div元素與class="col-md-3"隱藏，顯示它。如果它可見，則隱藏它。

  我添加了類名字hide-show到div的通過向選擇特定elments僅

• 首先負載的jQuery以下

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

$(document).ready(function(){ 
 
    $('#click-show').click(function(){ 
 
    $('div.hide-show').toggle(); 
 
    }); 
 
});

.hide-show{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row text-center"> 
 

 
     <h3 id="click-show">Click here to see the buttons.</h3> 
 

 
     <hr class="spacer"> 
 

 
      <div class="hide-show col-md-3 col-xs-12"> 
 
      <section> <a href="#"><button> 
 
         <h1>Button 1</h1> 
 
        </button></a> </section> 
 
      </div> 
 

 
      <div class="hide-show col-md-3 col-xs-12"> 
 
      <section> <a href="#"><button> 
 
         <h1>Button 2</h1> 
 
        </button></a> </section> 
 
      </div> 
 

 
      <div class="hide-show col-md-3 col-xs-12"> 
 
      <section> <a href="#"><button> 
 
         <h1>Button 3</h1> 
 
        </button></a> </section> 
 
      </div> 
 

 
      <div class="hide-show col-md-3 col-xs-12"> 
 
      <section> <a href="#"><button> 
 
         <h1>Button 4</h1> 
 
        </button></a> </section> 
 
      </div> 
 

 
     </div>