title: Bootstrap dropdown menu always show and don't close
body: <p>have a problem. I made a side menu dropdown menu. The dropdown li is always open. When I click on the dropdown in the browser show me he is working, but... <a href="https://i.stack.imgur.com/Hdfu0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hdfu0.png" alt="always open" /></a></p>
  <p>This is the code in the navbarComponent.html</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar fixed-top  navbar-expand-lg navbar-light bg-light" style="z-index: 0;"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
              aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;span&gt;Produse&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;div class="collapse navbar-collapse " id="navbarTogglerDemo02"&gt;
  
              &lt;ul class="navbar-nav me-auto mb-2 mb-lg-0 text-center"&gt;
                  &lt;li class="nav-item dropdown" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"&gt;
                      &lt;a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                          aria-expanded="false"&gt;
                          Garduri
                      &lt;/a&gt;
                      &lt;ul class="dropdown-menu" aria-labelledby="navbarDropdown"&gt;
                          &lt;li&gt;&lt;a class="dropdown-item" routerLink="/garduri"&gt;Garduri&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class="dropdown-item" routerLink="/placi-gard"&gt;Placi de gard&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class="dropdown-item" routerLink="/stalpi-gard"&gt;Stalpi de gard&lt;/a&gt;&lt;/li&gt;
  ``                        &lt;/ul&gt;
                  &lt;/li&gt;
  
  
                  &lt;li class="nav-item" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"&gt;
                      &lt;a class="nav-link js-scroll-trigger" routerLink="/gardulete-flori"&gt;Gardulete de flori&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"&gt;
                      &lt;a class="nav-link js-scroll-trigger" routerLink="/ghivece"&gt;Ghivece si Jarnidiere&lt;/a&gt;
                  &lt;/li&gt;
                
  
              &lt;/ul&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How can I close that dropdown ?</p>