Bootstrap 下拉菜单只下降一次

Question

我有以下 bootstrap 导航栏：

        <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 个问题：

当我运行页面并单击 "Backend Options" 时，它会显示下拉列表，但是如果我尝试单击任何 link，我会收到警报（'Hi')，但它不会导航到 href.

中的 link

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

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

编辑：

这是代表我的问题的 jsfiddle link。

Answer 1

答案是更改以下行：

dropDownControl.dropdown();

为此：

dropDownControl.show();

Bootstrap 下拉菜单只下降一次

Bootstrap dropdown only drops once

javascript

jquery

twitter-bootstrap