如何制作“;导航条固定底部”;在响应模式下点击按钮时向上滑动?(引导程序）

How to make "navbar-fixed-bottom" slide up when button is clicked in responsive mode? (bootstrap)

本文关键字：按钮 引导程序 模式 导航 何制作 底部 响应      更新时间：2023-09-26

当前，当按下手机屏幕或窄窗口上的按钮时，Twitter Bootstrap底部的导航栏（用作页脚）会"向下"滑动。

我希望菜单向上滑动，而不是默认的向下滑动。。关于如何使用twitter引导程序实现这一点，有什么想法吗？

导航条页脚的视图层中使用的代码如下：

<footer id="footer" class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar dropup" data-toggle="collapse" data-target=".show-footer">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="nav-collapse collapse show-footer">
                <nav>
                    <ul class="nav pull-right">
                        <%= g_about_link(yield(:title)) %>
                        <%= g_contact_link(yield(:title)) %>
                        <%= g_faq_link(yield(:title)) %>
                        <%= g_careers_link(yield(:title)) %>
                        <%= g_privacy_link(yield(:title)) %>
                        <%= g_quotes_link(yield(:title)) %>
                        <%= g_terms_link(yield(:title)) %>
                        <li><a href="http://news.railstutorial.org/" target="_blank">News</a></li>
                    </ul>
                </nav>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</footer>

使用show（）事件回调滚动到页面底部：

http://jsfiddle.net/Apx5N/2/

$(function() {
  $('.collapse.show-footer').on('show', function () {
    $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  });
});

<div class="container">
  ...
  <div class="nav-collapse show-footer collapse"> ... </div>
</div>

对于那些使用Bootstrap 3的用户，事件"show"现在已重命名为"show.bs.collapse"，因此函数如下所示：

$(function() {
$('.collapse.show-footer').on('show.bs.collapse', function () {
    $("html, body").animate({ scrollTop: $(document).height() }, "slow");
  });
});

引导程序折叠文档

bootstrap中有一个类解决了所有dropup。使用它，它将自动弹出下拉菜单的下拉菜单

相关文章：