【响应式导航栏小屏幕状态下，自动弹出。 _导航栏 _响应式】

响应式导航栏小屏幕状态下，自动弹出。

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

导航栏响应式

详细描述

截图

代码

HTML    <div class="navbar-header navbar-toggle"> </div>
              <div class="collapse click-open navbar-collapse" id="jnshu">
                <ul class="nav navbar-nav navbar-right">
                    <li class="list"><a class="menu text-center" href="../html/task14-1.html">首页</a></li>
                    <li class="list"><a class="menu text-center" href="../html/task14-3.html">职业</a></li>
                    <li class="list"><a class="menu text-center" href="../html/task14-2.html">推荐</a></li>
                    <li class="list"><a class="menu text-center" href="../html/task14-1.html">关于</a></li>
                </ul>
            </div>
            <script type="text/javascript">
                $(document).ready(function() {
                    $(".navbar-toggle").click(function() {
                        $(".collapse").toggle();
                    });
                });
            </script>


CSS         .collapse {
                      display: none; }

编辑于2024-11-23

时间排序

热门排序

[深圳|结业弟子]JS-陈星宇
0

上面的代码是修改后的，通过.navbar-toggle的点击，触发.collapse的变化
先设置.collapse的样式：display：none；保证页面载入时导航栏是隐藏的
再通过下方的JS文件控制

查看全部>

编辑于2018-05-11

去第页