需要帮助 Bootstrap 3 Scrollspy 以使用自动折叠的移动菜单

Question

我遇到的问题是，当同时单击 link 时，Scrollspy 和移动菜单都会折叠。我可以单独使用其中任何一个的功能，但不能一起使用。

此代码段具有 scrollspy 功能，但是，单击 linked 时移动菜单不会折叠。

<body data-spy="scroll" data-target="#mainNavbar">
<nav id="mainNavbar" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> 
                    <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" href="#">Site Name</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
                <ul class="nav navbar-nav">
                    <li><a href="#about">About</a></li>
                    <li><a href="#social-media">Social</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#" target="_blank">Blog</a></li>
                </ul>
            </div>
        </div>
    </nav>
</body>

如果我将以下内容添加到每个锚标记，移动菜单将在点击时折叠，但 scrollspy 会中断：

data-toggle="collapse" data-target=".navbar-collapse.in"

我假设是使用 data-target 导致了这个问题，但我不确定还有什么办法可以解决这个问题。

有人知道让这两个东西一起工作的方法吗？

在搜索其他答案时，我能够让这两个功能单独工作，但我仍然能够找到一些东西来帮助它们一起工作。如果我错过了答案，请指出正确的方向。

谢谢，

Answer 1

进一步搜索后，似乎在锚标记中使用 data-toggle 和 data-target 破坏了 scrollspy。我决定使用我在另一个 Whosebug question 上找到的以下 JS 来折叠移动导航菜单。这似乎不适用于子菜单，但我并不担心。

    <script>
      $('.navbar-collapse a').click(function (e) {
        $('.navbar-collapse').collapse('toggle');
      });
    </script>

需要帮助 Bootstrap 3 Scrollspy 以使用自动折叠的移动菜单

Need assistance getting Bootstrap 3 Scrollspy to work with auto-collapsing mobile menu

javascript

scrollspy

twitter-bootstrap-3