3

現在、下部にある Twitter Bootstrap のナビゲーション バー (フッターとして使用) は、電話画面または狭いウィンドウでボタンを押すと、「下」にスライドします。

メニューをデフォルトの「下」ではなく「上」にスライドさせたい..Twitterブートストラップでこれを行う方法についてのアイデアはありますか?

navbar フッターのビュー レイヤーで使用されるコードは次のとおりです。

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

3 に答える 3

6

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>
于 2013-02-18T03:48:21.587 に答える
3

Bootstrap 3 を使用している場合、イベント "show" は "show.bs.collapse" に名前が変更されたため、関数は次のようになります。

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

ブートストラップ折りたたみドキュメント

于 2014-01-24T00:16:55.107 に答える
0

すべてを解決するブートストラップのクラスが 1 つありますdropup。それを使用すると、ドロップダウンメニューからドロップアップメニューが自動的にポップアップします

于 2013-02-18T04:20:28.543 に答える