javascript - 移动设备中的 Bootstrap 菜单错误

Question

您好，我注意到当您打开导航栏并选择一个元素时，我的移动 Bootstrap 模板不会自动隐藏。

我希望点击登陆页面导航栏中的元素会自动隐藏导航栏。

这是导航栏代码:

<div class="navbar-header">
                <!-- Logo -->
                <div class="navbar-brand">
                    <a class="logo" href="index.html">
                        <img class="logo-img" src="./img/logo.png" alt="logo">
                        <img class="logo-alt-img" src="./img/logo-alt.png" alt="logo">
                    </a>
                </div>
                <!-- /Logo -->

                <!-- Mobile toggle -->
                <button class="navbar-toggle">
                        <i class="fa fa-bars"></i>
                    </button>
                <!-- /Mobile toggle -->
            </div>
            <!-- /navbar header -->

            <!-- Navigation -->
            <nav id="nav">
                <ul class="main-nav nav navbar-nav navbar-right">
                    <li><a href="#page0">Page 0</a></li>
                    <li><a href="#page1">Page 1</a></li>
                    <li><a href="#page2">Page 2</a></li>
                    <li><a href="#page3">Page 3</a></li>
                    <li><a href="#page4">Page 4</a></li>
                    <li><a href="#page5">Page 5</a></li>
                    <li><a href="#page6">Page 6</a></li>
                </ul>
            </nav>
            <!-- /Navigation -->
        </div>

我不知道该怎么做，因为我在这个领域不是很有经验，所以我不知道从哪里开始

Answer 1

在您的 smoothscroll 函数中，您可以触发切换事件。

fiddle :http://jsfiddle.net/9gh0q2o3/

JS:

$(".main-nav a[href^='#']").on('click', function(e) {
    e.preventDefault();
    $('.main-nav').toggleClass('open');   <== HERE
    var hash = this.hash;
    $('html, body').animate({
        scrollTop: $(this.hash).offset().top
    }, 800);
});