Comment fermer le menu bootstrap en cliquant sur l'icône?

Question

J'ai un bouton déroulant bootstrap qui affiche un menu déroulant. Cependant, je ne peux fermer le bouton qu'en cliquant sur les bords du bouton.

Quelqu'un peut-il m'aider à fermer le menu en cliquant sur le bouton?

HTML:

<div class="navbar-collapse collapse" id="PageNavigationBasic"> 
    <ul class="nav navbar-nav col-lg-7 col-md-7 col-sm-7 col-xs-7" id="NavigationLinksBasic"> 
     <li>@Html.ActionLink("HOME", "Index", "Homepage", "", new { @class = "MainNavText", @id = "MainNavHomeBasic" })</li> 
     <li>@Html.ActionLink("MANAGEMENT", "Index", "UserAdmin", "", new { @class = "MainNavText", @id = "MainNavManagementBasic" })</li> 
     <li><a data-target="#helpModal" data-toggle="modal" class="MainNavText" id="MainNavHelpBasic" href="#helpModal">HELP</a></li> 
     <li><a data-target="#releaseNotesModal" data-toggle="modal" class="MainNavText" id="MainNavReleaseNotesBasic" href="#releaseNotesModal">Release Notes</a></li> 

     @if (User.IsInRole("Admin") || User.IsInRole("ASDA")) { 
      <li>@Html.ActionLink("ASDA", "pageRedirect", "HomePage", new { pageName = "ASDA" }, new { @class = "MainNavText", @id = "MainNavManagementBasic" })</li> 
     } 

     @if (User.IsInRole("Admin") || User.IsInRole("Morrisons")) { 
      <li>@Html.ActionLink("Morrisons", "pageRedirect", "HomePage", new { pageName = "Morrisons" }, new { @class = "MainNavText", @id = "MainNavManagementBasic" })</li> 
     } 

     @if (User.IsInRole("Admin") || User.IsInRole("COOP")) { 
      <li>@Html.ActionLink("COOP", "pageRedirect", "HomePage", new { pageName = "COOP" }, new { @class = "MainNavText", @id = "MainNavManagementBasic" })</li> 
     } 
    </ul> 
</div> 

Script:

<script> 
    $(document).ready(function() { 
     $('.dropdown-toggle').dropdown(); 
    }); 

    $(document).ready(function() { 
     $("#PageNavigationBasic").click(function (event) { 
      $(".navbar-collapse").collapse('hide'); 
     }); 
    }); 

</script> 

Answer 1

essayer ce

$(document).ready(function() { 
    $("#PageNavigationBasic").click(function (event) { 
     if(!$('.navbar-toggle').hasClass('collapsed')){ 
      $(".navbar-toggle").click(); 
     } 
    }); 
});