【问题标题】:Bootstrap Navbar Not Folding Back Up Afer Selecting ID Element选择 ID 元素后引导导航栏不折叠备份
【发布时间】:2016-04-03 09:01:07
【问题描述】:

我正在使用引导导航栏导航到同一页面上的某些元素。因此,我的列表元素之一是

` <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">

         <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <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="#"><img src="img/spi_logo.png" height=30 width=41></a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li ><a href="#"><span class="glyphicon glyphicon-home"
                     aria-hidden="true"></span> Home</a></li>
                <li><a href="#about"><span class="glyphicon glyphicon-info-sign"
                     aria-hidden="true"></span> About</a></li>
                <li ><a href="#bio"><span class="fa fa-female"
                     aria-hidden="true"></span> Bio</a></li>                                

                <!--<li><a id="contact">
                <i class="fa fa-envelope"></i> Contact</a></li>-->
                <li><a href="#faq"><span class="fa fa-question"
                     aria-hidden="true"></span> FAQ</a></li>
                <li><a href="#quoteform"><span class="fa fa-dollar"
                     aria-hidden="true"></span> Quote</a></li>
                </ul>           

            </div>
        </div> <!-- end container -->
    </nav> `

导航栏很好地折叠在 xs 屏幕上。我可以单击切换导航图标栏、菜单下拉菜单,并且可以选择要在页面上跳转到的 id 元素。但是,在选择要跳转到的 id 后,菜单不会切换回来。我认为这是因为没有加载新页面,而是我只是跳下页面。那么如何配置导航栏以强制它重新切换呢?

【问题讨论】:

  • 嗨,罗伯特,如果可能的话,您能否首先发布您的完整页面代码。这样我们就可以检查更多的东西
  • 您希望导航栏在
  • 选择后切换到折叠模式
  • 我发布了整个导航栏代码。是的,我希望导航栏在
  • 选择后折叠起来。通过向上折叠,我认为这意味着切换回折叠。抱歉,如果我没有使用正确的术语。
  • 标签: javascript twitter-bootstrap


    【解决方案1】:

    我想你需要的是this question的答案。

    使用数据属性就可以了。

    【讨论】:

    • 你的回答启发我找到了这个link,这反过来又让我解决了这个&lt;li&gt;&lt;a href="#about" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" &gt;&lt;span class="glyphicon glyphicon-info-sign" aria-hidden="true"&gt;&lt;/span&gt; About&lt;/a&gt;&lt;/li&gt;的问题
    • 它的答案是我给你的 mate 链接。很高兴它有帮助。你能标记答案吗?
    • 我标记了答案,但我的代表分数只有 9。它必须是 15 才能公开显示赞成票。但是,是的,我赞成!!!
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签