如何在点击图标时关闭引导程序菜单？

Question

我有一个bootstrap下拉按钮，显示一个下拉菜单。但是，我只能通过点击按钮的边缘来关闭按钮。

有人可以点击按钮帮我关闭菜单吗？

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>
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });

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

</script>

Answer 1

试试这个

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