Bootstrap 下拉菜单只掉落一次

Question

我有以下引导导航栏：

        <div class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="@Href("~")">Admin</a>
                        @if (User.Identity.IsAuthenticated)
                        {
                            <ul class="nav navbar-nav">
                                <li class="dropdown" id="accessList">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="accessListTopLink">Backend Options <span class="caret"></span></a>
                                </li>
                            </ul>
                        }
                        <ul class="nav navbar-nav">
                            <li>@Html.ActionLink("Home", "ActionSelection", "View")</li>
                            @if (User.Identity.IsAuthenticated)
                            {
                                <li><a class="navbar-brand" href="@Url.Action("LogOut", "User")">Log Out</a></li>
                            }
                        </ul>
                    </div>
                </div>
            </div>
        </div>

然后这个脚本在html文件中：

        <script type="text/javascript">
            $(document).ready(function () {
                $('#accessList').one('click', function() {
                    LoadAccessList('@User.Identity.Name');
                });
                $('.accessList').on('click', function () {
                    alert('Hi');
                });
            });
        </script>

LoadAccessList js函数是：

function LoadAccessList(email) {
    var dropDownControl = $('#accessList');
    var topLinkControl = $('#accessListTopLink');
    // Load the available access list options from the service
    $.ajax({
        type: "GET",
        data: {
            email: email
        },
        url: '../User/LoadAccessList',
        success: function(resultsList) {
            var htmlToAdd = '<ul class="dropdown-menu" role="menu">';
            // Loop through and add all actions in.
            $.each($.parseJSON(resultsList), function(index, accessOption) {
                var serviceName = accessOption.Name;
                var url = accessOption.Url;

                htmlToAdd = htmlToAdd + '<li class="accessList"><a onclick="alert(\'Hi\')" href="' + url + '">' + serviceName + '</a></li>';
            });
            htmlToAdd = htmlToAdd + '</ul>';
            topLinkControl.after(htmlToAdd);
            dropDownControl.dropdown();
        },
        error: function(errorData) {
            // Error code passed back here.
            bootbox.alert('Error loading access list. Result was: <b>' + errorData.statusText + '</b>');
        }
    });
}

这个 ajax 调用基本上会加载一个名称和 url 列表，这些名称和 url 将被添加到列表中以导航到各个站点。

我有 2 个问题：

当我运行页面并单击“后端选项”时，它会显示下拉列表，但如果我尝试单击任何链接，我会收到警报（'Hi'），但它不会导航到的href。

其次，在第一次点击下拉菜单后点击离开，它不再响应另一次点击，因此您无法再次看到下拉菜单。

任何帮助将不胜感激，因为这让我发疯！

编辑：

这是代表我的问题的jsfiddle 链接。

Answer 1

答案是改成下面这行：

dropDownControl.dropdown();

到这里：

dropDownControl.show();