Question

崩溃无效。我正在使用Bootstrap 3和angularjs。这是我的代码：

  <div class="container">
    <div class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
                <button class="navbar-toggle pull-left" data-toggle="collapse" data-target="#navHeaderCollapse">
        <span class="icon-bar"></span>  
        <span class="icon-bar"></span>  
        <span class="icon-bar"></span>    
        </button>
            <span class="navbar-brand">Refat Rafi</span>

        </div>
        <div class="navbar-collapse collapse" id="navHeaderCollapse">
            <ul class="nav navbar-nav navHeaderCollapse">
                <li><a href="!#">Home</a></li>
                <li><a href="!#">Education</a></li>
                <li><a href="!#">About Me</a></li>
                <li><a href="!#">Education</a></li>
                <li><a href="!#">Skills</a></li>
            </ul>

        </div>

    </div> 

  </div>

https://jsfiddle.net/Refatrafi/0ec0zw96/

这是我在body标签中添加的脚本

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

我已经在此主题的堆栈溢出中搜索了许多先前的讨论，但找不到任何解决方案。

Answer 1

确保使用折叠插件[http://getbootstrap.com/javascript/#collapse]

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  Button with data-target
</button>

请参阅使用属性data-target和data-toggle。

另外，我不知道你在做什么，但我不使用Bootstrap javascripts。如果你使用像AngularUI或AngularStrap这样的端口，它将更适合AngularJS。

Answer 2

这样可以正常使用 DEMO

<nav class="navbar navbar-inverse" role="navigation">
   <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" 
         data-target="#example-navbar-collapse">
         <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="#">Refat Rafi</a>
   </div>
   <div class="collapse navbar-collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">HOME</a></li>
            <li><a href="#">Education</a></li>
            <li><a href="#">About Me</a></li>
          <li><a href="#">Education</a></li>
                <li><a href="#">Skills</a></li>
      </ul>
   </div>

</nav>

为什么bootstrap导航栏菜单没有崩溃？

2 个答案: