Question

我最近注意到，当我的布局文件的引导导航栏切换到适合移动设备的折叠变体时，用于扩展/显示导航链接的按钮行为非常奇怪，并且这样做完全是无法使用。

当我点击按钮展开菜单时，它会展开，显示动画以便打开足够长的时间以显示列表中的每个项目，然后立即自行关闭。

第二次点击只会显示一条出现白线的短动画 - 我最好的猜测是这是关闭的动画播放，但没有要关闭的菜单。

第二次单击后，行为将以相同的模式重复。

我不确定我会改变什么可能导致这种情况，除了可能搞乱我的javascript / css加载的顺序，但我在这方面所做的搜索似乎是与我在我的捆绑中所做的一致，在这里：

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
            "~/Scripts/modernizr-*",
            "~/Scripts/jquery-3.1.1.min.js",
            "~/Scripts/bootstrap.min.js",
            "~/Scripts/respond.min.js",
            "~/Scripts/jquery.validate.min.js*",
            "~/Scripts/jquery.validate.unobtrusive.min.js",
            "~/Scripts/jquery.unobtrusive-ajax.min.js",
            "~/Scripts/navbarLinksCurrentColor.js",
            "~/Scripts/ajaxCallWithLoadingIcon.js"
            ));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.min.css",
                  "~/Content/styles.css"));

        BundleTable.EnableOptimizations = true;
    }
}

bundle配置以标准方式加载，在Global.asax中：

    protected void Application_Start()
    {
        AreaRegistration.RegisterAllAreas();
        GlobalConfiguration.Configure(WebApiConfig.Register);
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
        RouteConfig.RegisterRoutes(RouteTable.Routes);
        BundleConfig.RegisterBundles(BundleTable.Bundles);

        if (!File.Exists(LogFilePath))
            File.Create(LogFilePath);
    }

这些包在我的布局视图中以这种方式加载，在这里：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/scripts")
</head>
<body>
    <header>
        @{Html.RenderPartial("NavigationMenu");}
    </header>
    <div class="body-content container-fluid">
        @RenderBody()
    </div>
    <footer>
    </footer>
    <div id="processing"
         class="processingIcon">
        <h2>Loading...</h2>
    </div>
    @RenderSection("scripts", required: false)
</body>
</html>

如您所见，布局视图调用局部视图来渲染导航菜单：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
        @*I originally was using the 4-span style that I've seen 
        commonly for the collapse button, but switched to a glyphicon
        approach to simplify things as well as see if it would fix the
        issue - it did not, so I don't think it is relevant to this issue*@
            <button type="button" class="navbar-toggle collapsed glyphicon glyphicon-menu-hamburger" 
            data-toggle="collapse" data-target="#navbarLinks"></button>
            <a class="navbar-brand" href="/">Hire Right Testing</a>
        </div>
        <div class="collapse navbar-collapse" id="navbarLinks">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("New Clients", "NewClients", "Client")</li>
                <li>@Html.ActionLink("Build a Custom Test", "Index", "CustomSolutions")</li>
                @*More links here...*@
            </ul>
        </div>
    </div>
</nav>

问题是在我将其迁移到自己的文件之前发生的，所以我不相信这是造成这种奇怪行为的原因。

唯一一个与此类似的案例是解决方案最终导致Bootstrap css和js文件不匹配的情况，我不认为是因为我已经卸载然后重新安装了Bootstrap nuget包（目前使用的是3.3.7版本，当前最新版本）。

包版本： Bootstrap - 3.3.7（也尝试过：3.3.5）

jQuery - 3.1.1（也尝试过：1.12.4,2.0.0,2.2.4,3.0.0.1）

jQuery.Validation - 1.16.0（也尝试过：1.15.1）

最后的想法：不确定_references.js文件是否对此很重要，但这里也是该文件：

/// <reference path="jquery-3.1.1.js" />
/// <autosync enabled="true" />
/// <reference path="ajaxcallwithloadingicon.js" />
/// <reference path="bootstrap.min.js" />
/// <reference path="customsolutions/categoryfilterpartial.js" />
/// <reference path="customsolutions/customsolutionspartial.js" />
/// <reference path="customsolutions/index.js" />
/// <reference path="jquery.unobtrusive-ajax.min.js" />
/// <reference path="jquery.validate.min.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
/// <reference path="jquery-3.1.1.min.js" />
/// <reference path="jquery-3.1.1.slim.min.js" />
/// <reference path="modernizr-2.8.3.js" />
/// <reference path="navbarlinkscurrentcolor.js" />
/// <reference path="orderdetailsupdates.js" />
/// <reference path="replacingdivcontents.js" />
/// <reference path="respond.matchmedia.addlistener.min.js" />
/// <reference path="respond.min.js" />
/// <reference path="showhidediv.js" />
/// <reference path="toggledivsandbuttons.js" />

Answer 1

我确实找到了导致此问题的代码部分。我通过使用模板创建一个新的.NET MVC应用程序并试验从具有该问题的应用程序复制的代码来得到这个答案。没有脚本/捆绑似乎是问题，实际问题是我的CSS的一部分。

回过头来，我显然把这个块放在我的主.scss文件中：

.navbar-collapse.collapse {
    display: none!important;
}

我不记得为什么我把它放在我的CSS中 - 但这是导航菜单问题的唯一原因。

点击移动/小屏幕尺寸

1 个答案: