Bootstrap 点击切换图标后下拉菜单消失

Question

我从 bootstrap 复制粘贴了一个导航栏： https://getbootstrap.com/docs/4.3/components/navbar/

当我将此代码粘贴到我的项目中时，导航栏可以正常工作，除非 我将浏览器缩小到移动尺寸并 单击汉堡菜单。当我点击菜单时，我的全部出现，但之后它们很快就消失了。我还必须单击汉堡菜单两次才能显示锚标记。同样的事情也发生在我创建的导航栏上，我将在下面 post。

我的代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <img id="navbarLogo" src="img/Home/Crunchsoft.techSignature.png">
    <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar"
        aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="navbar">
        <div id="navbar-items" class="navbar-nav">
            <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#">Services</a>
            <a class="nav-item nav-link" href="#">Contact</a>
            <a class="nav-item nav-link" href="#">About</a>
        </div>
    </div>
</nav>

我的_Host.cshtml:

@page "/"
@namespace Crunchsoft.techWebsite.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Crunchsoft.techWebsite</title>
    <base href="~/" />

    @*custom css*@
    <link href="css/index.css" rel="stylesheet" />

    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    @*Animation*@
    <link href="assets/animate.css" rel="stylesheet" />


</head>
<body>
    <app>
        @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
    </app>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

我试过将脚本放在页面底部并将 bootstrap 放在我的 head 标签的不同位置，但都无济于事。

我已经看过很多其他的 Whosebug 解决方案：

Bootstrap dropdown disappears after clicking it

Bootstrap 4 Toggle Checkbox within Dropdown menu

Keep Bootstrap dropdown open on click

并且无法从中得出对我有用的答案。

更令人沮丧的是，当我在 fiddle 中创建导航栏时，它起作用了。

https://jsfiddle.net/MaxTaylor/6rftaw3o/1/

编辑：我已经尝试注释掉除 bootstrap 之外的所有样式表，但我仍然遇到这个问题。我正在使用 Blazor .AspNetCore。我使用 Visual Studio 代码尝试了同样的事情并且它有效，但仍然无法在我的 Blazor 项目中工作。

Answer 1

我测试了您的两个代码片段，从我的角度来看，它们似乎按预期工作。这很可能意味着有一些 CSS class 覆盖了您的汉堡包功能。

我看不到自定义 css，所以我的建议是在 customSoftware.css 和 SeanStyle.css 中搜索，看看是否有任何内容针对您的按钮或汉堡包 classes。

Answer 2

我找到了问题的答案。由于 Bootstrap 如何操纵 DOM，某些 Bootstrap 组件似乎无法与 Blazor 一起使用。

所以我在 Razor 组件中编写了自己的导航栏

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <img id="navbarLogoWords" src="/img/home/Crunchsoft.techSignature.png"/>

        <button onclick="toggleNavBar()" class="navbar-toggler" type="button"
                aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbar">
            <div id="navbar-items" class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="Services">Services</a>
                <a class="nav-item nav-link" href="#">Contact</a>
                <a class="nav-item nav-link" href="#">About</a>
            </div>
        </div>
</nav>

然后为它写了我自己的 JavaScript 文件：

function toggleNavBar() {
    var x = document.getElementById("navbar");
    if (x.style.display === "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
    }
}

并在我的 _Host.cshtml

中添加了 link

<script src="/javaScript/scripts.js"></script>

我想因为我使用的是 Blazor，所以在同一个组件中使用 C# 比在单独的文件中使用 JS 可能更有意义，但我无法弄清楚如何使用 C#。

Answer 3

当我们在 blazor 项目中使用 bootstrap 时，我们必须进行大量调整才能使 bootstrap javascript 顺利运行。

对我来说，如果在 blazor 项目中，除了需要我访问 javascript API.

下面是 C# 仍然可以完成的案例的一个示例

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <img id="navbarLogoWords" src="/img/home/Crunchsoft.techSignature.png"/>

        <button @onclick="toggleNavBar" class="navbar-toggler" type="button" aria-expanded="@expandedState" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse @cssShowMenu">
            <div id="navbar-items" class="navbar-nav">
                <a @onclick="collapsedNavBar" class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a @onclick="collapsedNavBar" class="nav-item nav-link" href="Services">Services</a>
                <a @onclick="collapsedNavBar" class="nav-item nav-link" href="#">Contact</a>
                <a @onclick="collapsedNavBar" class="nav-item nav-link" href="#">About</a>
            </div>
        </div>
</nav>

@code {
    private bool expandedState = false;
    private string cssShowMenu = null;

    private void toggleNavBar()
    {
        expandedState = !expandedState;
        cssShowMenu = expandedState ? "show" : null;
    }

    private void collapsedNavBar()
    {
        expandedState = false;
        cssShowMenu = expandedState ? "show" : null;
    }
}

我希望这段代码可以帮助您或其他人。 >_<

Bootstrap 点击切换图标后下拉菜单消失

Bootstrap dropdown menu disappears after clicking toggler-icon

html

css

navigation

jquery

bootstrap-4