Bootstrap navbar mega menu 在 Asp.Net Core 上不起作用
[英]Bootstrap navbar mega menu doesn't work on Asp.Net Core
問題描述
我想從這里在我的布局中使用 Bootstrap 導航欄巨型菜單下拉菜單：
https://bootstrap-menu.com/detail-megamenu.html
我下載了代碼並將其放入我的布局中，但是當我單擊它時，大型菜單既沒有展開也沒有任何反應。 在 chrome 檢查部分中，Aria-expanded 始終為 aria-expanded="false"。 我錯過了什么？
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - ECommerce.Web</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<!-- Bootstrap files (jQuery first, then Popper.js, then Bootstrap JS) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<style type="text/css">
@@media all and (min-width: 992px) {
.navbar {
padding-top: 0;
padding-bottom: 0;
}
.navbar .has-megamenu {
position: static !important;
}
.navbar .megamenu {
left: 0;
right: 0;
width: 100%;
padding: 20px;
}
.navbar .nav-link {
padding-top: 1rem;
padding-bottom: 1rem;
}
}
</style>
</head>
<body class="bg-light">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ECommerce.Web</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" 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 flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- ========================= SECTION CONTENT ========================= -->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
<li class="nav-item"><a class="nav-link" href="#"> About </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Services </a></li>
<li class="nav-item dropdown has-megamenu">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Mega menu </a>
<div class="dropdown-menu megamenu" role="menu">
<div class="row">
<div class="col-md-3">
<div class="col-megamenu">
<h6 class="title">Title Menu One</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-md-3">
<div class="col-megamenu">
<h6 class="title">Title Menu Two</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
<div class="col-md-3">
<div class="col-megamenu">
<h6 class="title">Title Menu Three</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div>
<div class="col-md-3">
<div class="col-megamenu">
<h6 class="title">Title Menu Four</h6>
<ul class="list-unstyled">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</div> <!-- col-megamenu.// -->
</div><!-- end col-3 -->
</div><!-- end row -->
</div> <!-- dropdown-mega-menu.// -->
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#"> Menu item </a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> Dropdown </a>
<ul class="dropdown-menu dropdown-menu-right">
<li><a class="dropdown-item" href="#"> Submenu item 1</a></li>
<li><a class="dropdown-item" href="#"> Submenu item 2 </a></li>
</ul>
</li>
</ul>
</div> <!-- navbar-collapse.// -->
</nav>
</div><!-- container // -->
<div class="container">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2020 - ECommerce.Web - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@RenderSection("Scripts", required: false)
</body>
</html>
<script type="text/javascript">
/// some script
// jquery ready start
$(document).ready(function () {
// jQuery code
//////////////////////// Prevent closing from click inside dropdown
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
}); // jquery end
</script>
1 個解決方案
解決方案1
0 已采納 2021-01-04 07:35:03
您可以嘗試刪除<head></head>中的以下代碼：
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<!-- Bootstrap files (jQuery first, then Popper.js, then Bootstrap JS) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js" type="text/javascript"></script>
bootstrap datatable javascript在asp.net Repeater中不起作用
[英]bootstrap datatable javascript doesn't work in asp.net Repeater
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
ASP.NET MVC應用程序中的導航欄無法與引導程序一起使用
Bootstrap Datepicker在Asp.net網站中不起作用
bootstrap datatable javascript在asp.net Repeater中不起作用
大型菜單的第三級不起作用
為什么在asp.net中不起作用？
ASP.NET中的RegisterStartupScript（）不起作用
由於波浪號“~”，Asp.Net Core 3.1 引用不起作用
Bootstrap 4 導航欄折疊不起作用
Bootstrap導航欄折疊不起作用
Summernote 下拉菜單不適用於 Bootstrap 導航欄
相關標簽