浮动页脚栏-使用Bootstrap隐藏

Floating footer bar - hiding using Bootstrap

本文关键字：使用 Bootstrap 隐藏      更新时间：2023-09-26

我正在使用Bootstrap创建一个网站，我想有一个浮动的页脚栏来选择语言，Q&等

但我想在那里有一个"隐藏"按钮。

它看起来像这样：

    <div id="footer" class="navbar navbar-default navbar-fixed-bottom">
        <div id="innerFooter" class="container-fluid">
            <div class="collapse navbar-collapse">
                <div class="col-xs-6">
                    <a class="btn btn-default " data-toggle="collapse" href="#footer" aria-expanded="true" aria-controls="footer">
                       Hide
                    </a>
                </div>
                <div class="col-xs-6">
                ...some buttons..
                </div>
            </div>
        </div>
    </div>

我有两个问题：

  1. 当我隐藏栏并转到另一页时，栏会弹出再次
  2. 当我点击隐藏按钮时，第一次尝试没有效果任何东西，但当我第二次点击时，栏会隐藏起来

谢谢你的帮助！

对于第一个问题：

您必须存储导航栏可见性的状态。。。如果你不编码，浏览器怎么知道它是否应该显示导航栏？

对于第二个问题

您想要崩溃，但没有初始状态。

你的导航栏应该有collapse in类

引导：http://www.bootply.com/p1xNGxePan

HTML：

<div id="footer" class="navbar navbar-default navbar-fixed-bottom collapse in">
    <div id="innerFooter" class="container-fluid">
        <div class="collapse navbar-collapse">
            <div class="col-xs-6">
                <a class="btn btn-default" data-toggle="collapse" href="#footer" aria-expanded="true" aria-controls="footer">
                   Hide
                </a>
            </div>
            <div class="col-xs-6">
            ...some buttons..
            </div>
        </div>
    </div>
</div>
相关文章：