当前位置： 文江博客话题详情

下拉菜单赢了

发布于 2025-02-07 12:12:16 字数 3576 浏览 2 评论 0原文

以下是我的_layout.cshtml页面的相关HTML。我的问题是，当您单击下拉菜单，支撑表，什么也不会发生 - 什么都没有下降。在搜索Google之后，我什至尝试了许多其他示例，但没有任何示例可用。最后，从在线操作操作工作的一个样式表链接工作，但它改变了我的页面样式，因此正在寻找无法做到这一点的解决方案。

如果有人可以看一下我可能错了/缺少什么，就会很感激。我认为这一定是脚本SRC或样式表链接，但我不知道我需要添加或替换哪个链接。非常新鲜，对我的无知感到抱歉。谢谢你！

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - EmergencyContactsWeb</title>
    <link rel="stylesheet" href="~/css/bootswatch_darkly.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">PHECWeb</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-page="/InfoSites/Index">Site Information</a>
                        </li>
                        <!--Dropdown Below-->
                        <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Supporting Tables</a>
                                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" asp-area="" asp-page="/MDSpecialties/Index">MD Specialities</a>
                                        <a class="dropdown-item" asp-area="" asp-page="/ResCategories/Index">Residence Categories</a>
                                    </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">...
原文

Below is the relevant HTML for my _Layout.cshtml page. My issue is that when you click the dropdown menu, Supporting Tables, nothing happens - nothing drops down. I have even tried many other examples after searching Google, but none worked. Finally, one stylesheet link from an online how-to worked, but it changed the styles of my page, so am looking for a solution that won't do that.

Would appreciate it if someone could take a look and see what I might have wrong/be missing. I think it must be a script src or stylesheet link, but I do not know which one I would need to add or replace. Very new to this, so am sorry for my ignorance. Thank you!

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - EmergencyContactsWeb</title>
    <link rel="stylesheet" href="~/css/bootswatch_darkly.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">PHECWeb</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-page="/Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-page="/InfoSites/Index">Site Information</a>
                        </li>
                        <!--Dropdown Below-->
                        <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Supporting Tables</a>
                                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                        <a class="dropdown-item" asp-area="" asp-page="/MDSpecialties/Index">MD Specialities</a>
                                        <a class="dropdown-item" asp-area="" asp-page="/ResCategories/Index">Residence Categories</a>
                                    </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">...

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

被翻牌 2025-02-14 12:12:16

在另一个stackoverflow帖子上找到了这一点（我在发布该问题之前先在此处搜索过，但是必须使用其他搜索词。我在Google上找到了这一点。）

我需要在我的链接rels下以及以下顺序中包括这些脚本SRC：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

链接 ：原始解决方案在这里：
bootstrap 4下拉菜单不起作用？

希望可以帮助他人！我不知道有一个特殊的顺序。

Found this on another stackoverflow post (I had searched here prior to posting the question, but must have used other search terms. I found this on Google.)

I needed to include these script srcs under my link rels and in this order:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

The link to the original solution is here:
Bootstrap 4 Dropdown Menu not working?

Hope that can help others! I had no idea there was a particular order.

回复 原文
桃扇骨 2025-02-14 12:12:16

您正在使用引导程序，但是Bootstrap CSS的CDN不包含在您的Head Tag中。您唯一要做的就是将其添加到您的头标签中：

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
  crossorigin="anonymous"
/>

You are using Bootstrap but cdn of bootstrap CSS is not included in your head tag. The only thing you have to do is to add this to your head tag :

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
  crossorigin="anonymous"
/>
回复 原文
~没有更多了~

关于作者

情仇皆在手

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

夢野间

文章 0 评论 0

百度③文鱼

文章 0 评论 0

小草泠泠

文章 0 评论 0

zhuwenyan

文章 0 评论 0

weirdo

文章 0 评论 0

坚持沉默

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文