javascript - How to close bootstrap menu on click of the icon? -

i have bootstrap drop down button displays drop down menu. however, can button close clicking around edges of button.

can me close menu clicking on button?

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> 

try this

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