Question

我有以下bootstrap导航栏：

＆＃13;

        <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>

＆＃13;

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

＆＃13;

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

＆＃13;

LoadAccessList js函数是：

＆＃13;

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>');
        }
    });
}

＆＃13;

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

我有两个问题：

当我运行该页面并单击＆＃34;后端选项＆＃34;它会显示下拉列表，但如果我尝试点击任何链接，我会收到提醒（＆＃39;嗨＆＃39;），但它不会导航到href中的链接。

其次，在初次点击下拉列表后，点击它不再响应另一次点击，这样您就无法再次看到下拉列表。

任何帮助都会非常感激，因为这让我很生气！

修改

以下是代表我的问题的jsfiddle链接。

Answer 1

答案是更改以下行：

dropDownControl.dropdown();

对此：

dropDownControl.show();

Bootstrap下拉列表只下降一次

1 个答案: