How to close bootstrap menu on click of the icon?

Question

I have a bootstrap drop down button which displays a drop down menu. However, I can only get the button to close by clicking around the edges of the button.

Can anybody help me close the menu by clicking on the 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>

Answer 1

try this

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