Question

我正在使用引导程序导航栏切换并定位类导航栏已折叠，但我的导航栏未在移动设备上自动关闭：

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
    <div class="container">
        <div class="navbar-header">
             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand scrollTo" href="#intro"><img id="bg-img" src="./img/hn-logo.png"></a>
        </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#intro">Home</a>
                </li>
                <li><a href="#section1">Products</a>
                </li>
                <li><a href="#section2">Learn</a>
                </li>
                <li><a href="#section3">Lab Testing</a>
                </li>
                <li><a href="#section4">Partners</a>
                </li>
                <li><a href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</div>

Answer 1

试试这个，在脚本标记中添加此Jquery

 <script type="text/javascript">
$('.nav a').on('click', function () {
    $('.btn-navbar').click(); //bootstrap 2.x
    $('.navbar-toggle').click() //bootstrap 3.x  
});
</script>

Answer 2

通过CDN或您自己的来源包含jquery

jQuery CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

然后包括bootstrap js CDN

Bootstrap

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Bootstrap Nav Bar未在移动设备上关闭

2 个答案: