浮动页脚栏 - 使用 Bootstrap 隐藏答案

【问题标题】：Floating footer bar - hiding using Bootstrap浮动页脚栏 - 使用 Bootstrap 隐藏
【发布时间】：2016-05-19 13:08:21
【问题描述】：

我正在使用 Bootstrap 创建一个网站，我希望有一个浮动页脚栏来选择语言、问答等。

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

看起来像这样：

    <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>

我有两个问题：

当我隐藏栏并转到另一个页面时，会弹出该栏再次。
当我单击隐藏按钮时，第一次尝试不起作用任何东西，但是当我第二次点击时，该栏隐藏了。

感谢您的帮助！

【问题讨论】：

标签： javascript jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

对于第一个问题：

您必须存储导航栏可见性的状态... 如果您不对其进行编码，浏览器如何知道它是否应该显示导航栏...？

第二个问题

你想折叠但没有初始状态。

你的导航栏应该有 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>

【讨论】：