title: Double click ?? on dropdownlist in ASP.NET MVC
body: <p>I have an ASP.NET MVC project and my navbar is working weirdly. When I click a dropdownlist from my navbar, it doesn't work the first time. It only works on the second time? So I have to double click it.</p>
  <p>I found some tips that when using Bootstrap 4 then bootstrap.min.js and bootstrap.bundle.min.js are in conflict in dropdownlist. By removing bootstrap.min.js, the dropdown double click issue should be solved. But I tried this and it didn't work...</p>
  <p>Any suggestions?</p>
  <p>This is my code:</p>
  <pre><code>&lt;style&gt;
      #navbarSupportedContent {
          padding-left: 28%;
          margin: 5px 0px;
      }
  
      li {
          margin-right: 40px;
      }
  
      .nav li {
          margin-right: 10px;
      }
  &lt;/style&gt;
  
  &lt;nav class=&quot;navbar navbar-expand-lg navbar-dark bg-primary&quot;&gt;
      &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarSupportedContent&quot; aria-controls=&quot;navbarSupportedContent&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
          &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarSupportedContent&quot;&gt;
          &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                  &lt;a class=&quot;nav-link&quot; href=&quot;~/Home/Index&quot;&gt;HOME&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                  &lt;a class=&quot;nav-link&quot; href=&quot;~/Home/About&quot;&gt;ABOUT US&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                  &lt;a class=&quot;nav-link&quot; href=&quot;~/Home/Contact&quot;&gt;CONTACT US&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item dropdown&quot;&gt;
                  &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;#&quot; id=&quot;navbarDropdown&quot; role=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
                      DROPDOWN
                  &lt;/a&gt;
                  &lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;navbarDropdown&quot;&gt;
                      &lt;a class=&quot;dropdown-item&quot; href=&quot;~/Clients/Index&quot;&gt;Clients&lt;/a&gt;
                      &lt;a class=&quot;dropdown-item&quot; href=&quot;~/Events/Index&quot;&gt;Events&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                  &lt;a href=&quot;@Url.Action(&quot;LogOut&quot;,&quot;Home&quot;)&quot; class=&quot;nav-link&quot;&gt;LOG OUT&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
      jQuery(function ($) {
          var path = window.location.href;
          $('nav a').each(function () {
              if (this.href === path) {
                  $(this).addClass('active');
              }
          });
      });
  &lt;/script&gt;
  </code></pre>