个人中心
gpt4 book ai didi

jquery - 单击切换器图标后，Bootstrap 下拉菜单消失

转载 作者：太空宇宙 更新时间：2023-11-04 00:39:53 28 4
gpt4 key购买 nike

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

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

我的代码:

<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 标签的不同位置，但都无济于事。

我已经看过很多其他的 stackoverflow 解决方案:

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 Code 尝试了同样的事情并且它有效，但仍然无法在我的 Blazor 元素中工作。

最佳答案

当我们在 blazor 元素中使用 bootstrap 时，我们必须做很多调整，以便 bootstrap javascript 顺利运行。

对我来说，如果在 blazor 元素中，除了需要我访问 javascript API 的不同情况外，我更愿意避免在 C# 仍然可以完成的情况下使用 javascript。

下面是 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;
    }
}

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

关于jquery - 单击切换器图标后，Bootstrap 下拉菜单消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58529562/

28 4 0
文章推荐： python - NLTK 停用词返回错误 "LazyCorpusLoader is not callable"
文章推荐： c - 用多个数字返回C中的奇数/偶数
文章推荐： python - 使用 ctypes 将 python 字符串传递给 Fortran 子例程
文章推荐： c - C中的十六进制数组
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com