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文件中添加以下脚本:

Then this script in the html file:

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

LoadAccessList js函数是:

The LoadAccessList js function is:

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将添加到该列表中以导航到各个站点.

This ajax call basically loads a list of names and urls that will be added to the list to navigate to various sites.

我有2个问题:

当我运行页面并单击后端选项"时，它会显示下拉列表，但是如果我尝试单击任何链接，则会收到警报("Hi")，但不会导航到该链接href.

When I run the page and click the "Backend Options" it shows the dropdown list, but if I try to click any of the links I get the alert('Hi'), but it does not navigate to the link in the href.

第二，在首次单击下拉菜单后单击鼠标按钮，它不再响应另一次单击，因此您无法再次看到该下拉菜单.

Secondly, after the initial click of the dropdown then click away it no longer responds to another click so you cannot see the dropdown again.

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

Any help would be much appreciated as this is driving me mad!

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

Here is the jsfiddle link representing my issue.

推荐答案

答案是更改以下行:

dropDownControl.dropdown();

对此:

dropDownControl.show();

这篇关于Bootstrap下拉列表仅下降一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！