导航栏不会折叠 Bootstrap 5答案

【问题标题】：Navbar won't collapse Bootstrap 5导航栏不会折叠 Bootstrap 5
【发布时间】：2022-09-27 17:37:27
【问题描述】：

我在导航栏中添加了一个切换元素，当我单击它时它会打开但不会关闭。我尝试过在其他 stackoverflow 帖子上找到的解决方案，但似乎没有任何效果（有时会变得更糟）

basic.html（我在其中添加所有样式表）

      <script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js\"></script>
  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.5/umd/popper.min.js\"></script>
  <script src=\"https://unpkg.com/@popperjs/core@2/dist/umd/popper.js\"></script>
  <script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js\"
  integrity=\"sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT\" crossorigin=\"anonymous\"></script>
  <script src=\"/static/app/custom.js\"></script> 
  {% block javascript %}
  {% endblock javascript %}

导航栏.html

    <a class=\"close-navbar-toggler collapsed\" data-toggle=\"collapse\" data-target=\"#navbarNav\" 
    aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">  
    </a> 
    
      <nav class=\"navbar navbar-expand-lg navbar-dark bg-primary sticky-top\">
        <div class=\"container-fluid\">
            <a class=\"navbar-brand\" href=\"/\"> <!--icon placement-->
              <img src=\"{% static \'app/images/favicon.png\' %}\" 
              alt=\"computer display with dna in it\" width=\"30\" height=\"30\"> 
            </a>      
            <button class=\"navbar-toggler\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navbarNav\" 
                    aria-controls=\"navbarNav\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">
              <span class=\"navbar-toggler-icon\"></span>
            </button>
            <div class=\"collapse navbar-collapse\" id=\"navbarNav\">
          ...
            </div>

标签： html css bootstrap-5

【解决方案1】：

将data-toggle="collapse" 更改为data-bs-toggle="collapse"。
将data-target="#navbarNav" 更改为data-bs-target="#navbarNav"。

【讨论】：