需要帮助获得Bootstrap 3 Scrollspy与自动折叠移动菜单工作

我遇到的问题是，当链接被点击在一起时，Scrollspy和移动菜单都会崩溃。我可以让其中任何一个单独工作，但不能一起工作。

这个代码片段有scrollspy工作，但是，当点击链接时，移动菜单不会崩溃。

<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是导致问题的原因，但我不确定如何解决它。

有谁知道如何让这两件事一起工作吗?

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

谢谢,

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

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

相关内容

最新更新

热门标签：