目前,当在手机屏幕或窄窗口上按下按钮时,Twitter Bootstrap 底部的导航栏(用作页脚)会“向下”滑动。
我希望菜单“向上”滑动而不是默认的“向下”滑动。关于如何使用 twitter bootstrap 执行此操作的任何想法?
navbar footer的 View 层使用的代码如下:
<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() 事件回调滚动到页面底部:
$(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>
关于javascript - 如何在响应模式下单击按钮时使 "navbar-fixed-bottom"向上滑动? ( Bootstrap ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14918773/