javascript - css Onclick在页面底部显示div

Question

我构建了一个简单的页面，无需向下滚动即可查看所有内容。

我有一些内容要显示在底部，但我不想首先显示它。

我希望用户点击一个短语能够看到这个内容。

该短语将首先位于页面底部，然后在单击后会上升一点，以便为现在显示的隐藏内容留出空间。

如果您明白我的意思，此内容会从下到上显示，就像“反向下拉菜单”。

这是我的 HTML。 “click-show”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 - 函数接受回调函数并在 ID 为 click-show 的元素时触发它被点击。
• $('div.hide-show').toggle()如果div带有 class="col-md-3" 的元素隐藏，显示它。如果可见，请将其隐藏。

  I added a class name hide-show to the div's to select particular elments only

• 首先通过添加以下内容加载 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>