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>