ハンバーガーメニューの非表示、単一ページナビゲーションプラグイン-jquery.singlePageNav.min.js、

6170 ワード

単一ページナビゲーションプラグインは、ナビゲーションバーやサイドナビゲーションをクリックすると、クリックしたコンテンツ領域に自動的に上下に移動します.Bootstrapで応答式ナビゲーションバーを書くと小さな画面の下にハンバーガーメニューが表示されますが、ハンバーガーメニューのサブメニューをクリックすると、ハンバーガーメニューを自動的に上に縮小するにはどうすればいいですか?3.jsの2段目を見てハンバーガーメニューを隠す.
プラグインのダウンロード:http://download.csdn.net/detail/erdouzhang/9775622
1.htmlページ導入カード
jquery.singlePageNav.min.jsプラグインをindex.htmlページに導入します.
<script src="lib/jquery.singlePageNav.min.js">script>

2.ナビゲーションバーulリストのnavを見つける
私のナビゲーションバーはクラス.navで、ulにid値id="nav"を追加することもできます.
<nav class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="sr-only">span>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
        button>
        <a href="#" class="navbar-brand">  a>
    div>
    <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">  a>li>
            <li><a href="#">  a>li>
            <li><a href="#">  a>li>
            <li><a href="#">  a>li>
        ul>
    div>
nav>

3.js
navにjs、すなわち.singlePageNav()のナビゲーションバーの高さ70 px、すなわち70 pxを下方にシフト.
$(function(){
    //         
    $('.nav').singlePageNav({
        offset:70
    });
    //                 
    $('.navbar-collapse a').click(function(){
        $('.navbar-collapse').collapse('hide');
    });

});