我的切换导航栏不起作用。有人能帮我吗？答案

【问题标题】：My toggle navbar is not working. Can someone help me?我的切换导航栏不起作用。有人能帮我吗？
【发布时间】：2022-01-23 03:45:25
【问题描述】：

我的切换导航栏不起作用，谁能告诉我为什么以及如何解决它？我在网上看了，但我仍然不确定我的问题是什么。

    <!DOCTYPE html>
<html lang="en">
{% load static %}
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><style>
 
        
  
    <title>homepage</title>
    </head>
    <body>

  </head>
  <body>
    
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MyMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      
          <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="MyMenu">
          <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                  <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link"  href="/sentiment/type">Input Text</a>
            </li>
              <li class="nav-item">
                  <a class="nav-link"  href="/sentiment/import">Import Tweets</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="/feedback">Feedback</a>
              </li>
          </ul>
      </div>
      <span class="hello-msg"><strong>Hello, {{request.user}}</strong></span>&nbsp;&nbsp;&nbsp;
      <button class="btn btn-danger navbar-btn" ><a href="{% url 'user:logout' %}"><h7 class="white-text" color=white;>Logout</h7></a></button>

  </nav>
    <!-- END nav -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

   
  </body>
</html>

我从这里使用导航栏：https://getbootstrap.com/docs/4.0/components/navbar/

【问题讨论】：

创建runnable code snippet 总是有帮助的。这样做你可能会自己遇到问题......

标签： javascript html css bootstrap-4

【解决方案1】：

您有一些语法错误，只需将其复制并替换为您的代码即可：


    <!DOCTYPE html>
    <html lang="en">
    {% load static %}
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
     
        <title>homepage</title>
      </head>
      <body>
        
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MyMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          
              <span class="navbar-toggler-icon"></span>
          </button>
    
          <div class="collapse navbar-collapse" id="MyMenu">
              <ul class="navbar-nav mr-auto">
                  <li class="nav-item active">
                      <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link"  href="/sentiment/type">Input Text</a>
                </li>
                  <li class="nav-item">
                      <a class="nav-link"  href="/sentiment/import">Import Tweets</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="/feedback">Feedback</a>
                  </li>
              </ul>
          </div>
          <span class="hello-msg"><strong>Hello, {{request.user}}</strong></span>&nbsp;&nbsp;&nbsp;
          <button class="btn btn-danger navbar-btn" ><a href="{% url 'user:logout' %}"><h7 class="white-text" color=white;>Logout</h7></a></button>
    
      </nav>
        <!-- END nav -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    
       
      </body>
    </html>

【讨论】：

【解决方案2】：

您的语法错误。你有一个双体标签和双头标签。

【讨论】：