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，仅选择特定元素
首先通过添加以下
来加载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>

css Onclick在页面底部显示div

1 个答案: