引导可折叠导航栏的问题答案

【问题标题】：issues with bootstrap collapsible navbar引导可折叠导航栏的问题
【发布时间】：2016-01-20 12:48:25
【问题描述】：

单击时我无法展开折叠的导航（例如移动设备上的三个小图标栏按钮无法打开导航菜单）。我哪里错了？这是我所拥有的：

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target: "#nav-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar" style="color: #fff;"></span>
            <span class="icon-bar" style="color: #fff;"></span>
            <span class="icon-bar" style="color: #fff;"></span></button></div>
        <div class="navbar-collapse collapse" id="nav-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/index.html">Home</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Products <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Plasmid DNA</a></li>    
                            <li><a href="#">DNA & RNA Clean-Up</a></li>
                            <li><a href="#">Genomic DNA</a></li>
                            <li><a href="#">RNA</a></li>
                            <li><a href="#">PCR Reagents</a></li>
                            <li><a href="#">Electrophoresis</a></li>
                            <li><a href="#">Kit Components</a></li></ul></li>
                    <li><a href="http://www.omegabioservices.com">Services</a></li>
                    <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Support <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="faq.html">FAQ</a></li>    
                            <li><a href="#">Brochures</a></li>
                            <li><a href="#">App Notes</a></li></ul></li>
                    <li><a href="distributors.html">Distributors</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                    <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">About Us<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="company.html">Company</a></li>    
                            <li><a href="#">Why Omega?</a></li>
                            <li><a href="jobs.html">Careers</a></li></ul></li></ul>
                             </ul></div></div></nav>

【问题讨论】：

标签： twitter-bootstrap nav collapse

【解决方案1】：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar" style="color: #fff;"></span>
        <span class="icon-bar" style="color: #fff;"></span>
        <span class="icon-bar" style="color: #fff;"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse" id="nav-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/index.html">Home</a>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Products <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Plasmid DNA</a>
            </li>
            <li><a href="#">DNA & RNA Clean-Up</a>
            </li>
            <li><a href="#">Genomic DNA</a>
            </li>
            <li><a href="#">RNA</a>
            </li>
            <li><a href="#">PCR Reagents</a>
            </li>
            <li><a href="#">Electrophoresis</a>
            </li>
            <li><a href="#">Kit Components</a>
            </li>
          </ul>
        </li>
        <li><a href="http://www.omegabioservices.com">Services</a>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Support <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="faq.html">FAQ</a>
            </li>
            <li><a href="#">Brochures</a>
            </li>
            <li><a href="#">App Notes</a>
            </li>
          </ul>
        </li>
        <li><a href="distributors.html">Distributors</a>
        </li>
        <li><a href="contact.html">Contact Us</a>
        </li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">About Us<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="company.html">Company</a>
            </li>
            <li><a href="#">Why Omega?</a>
            </li>
            <li><a href="jobs.html">Careers</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

您的data-target="#nav-collapse" 错误。你写了 (data-target: #nav-collapse)

【讨论】：