Question

我创建了一个导航栏，但它似乎没有响应。它仅在切换按钮出现的情况下起作用，但在单击时没有任何反应。此外，下拉菜单无效。我尝试了其他帖子中提到的各种解决方案，但似乎没有任何工作。

我已经包含了我最后链接到的脚本。请帮我确定哪里出错了

        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
    <!-- Brand and toggle grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="index.html">GrapeVine</a>
          </div>

          <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                <a href="#areas" class="dropdown-toggle" data-toggle="dropdown">Areas<b class="caret"></b></a>
              <ul class="dropdown-menu">
                    <li><a href="#North">North</a></li>
                    <li><a href="#East">East</a></li>
                    <li><a href="#South">South</a></li>
                    <li><a href="#west">West</a></li>
              </ul>
              </li>
              <li><a href="#about">About</a></li>
            </ul>
          </div>
      </div>
    </nav>


<script src="/js/myjQuery.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
    <script src="/js/bootsrap.min.js" type="text/javascript"></script>

Answer 1

我认为您的问题出在您的脚本来源

中

替换此

/js/bootsrap.min.js

到

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Answer 2

你的脚本源中有“bootsrap”而不是“bootstrap”：

<script src="/js/bootsrap.min.js" type="text/javascript"></script>

导航栏切换按钮和下拉菜单不起作用

2 个答案: