為什么我的漢堡菜單示例代碼不起作用？
[英]Why isn't my Hamburger menu example code working?
問題描述
我正在努力讓這個漢堡菜單發揮作用
這是示例代碼源https://www.jqueryscript.net/menu/responsive-multi-level-hamburger-nav.html
我正在使用 Visual Studio 2019，但不確定為什么這會給我帶來這么多麻煩？ 菜單要么在代碼啟動時完全擴展為文本，要么是 3 行，當我點擊它時沒有響應。 該示例看起來非常簡單，但我無法使其像示例中所示那樣工作。
[
$(document).ready(function () { //alert("Menu"); var display_width = $(window).width(); var hamburger = $("#hambuger_menu"); var menu = $("#menubody"); $(hamburger).click(function (e) { menu.toggleClass("open"); hamburger.toggleClass("open"); }); $(".menu_body__item_wrapper li.has_child").each(function (index) { $(this).click(function (event) { $('.sub-menu').eq(index).slideToggle(); event.preventDefault(); event.stopImmediatePropagation(); }); $('.sub-menu').click(function (e) { e.stopPropagation(); e.stopImmediatePropagation(); }) }) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> body { /*background-image: url('../../images/grandOpening1.jpeg');*/ } /*<script type="text/javascript" > $(document).ready(function() { alert("ready"); }); </script >*/ /*<script type="text/javascript" src="/wherever/whatever.js" / >*/ </style> <link href="~/Content/bootstrap.css" rel="stylesheet" /> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <link href="~/Content/main.css" rel="stylesheet" /> <link href="~/Content/Site.css" rel="stylesheet" /> <link href="~/Content/style.css" rel="stylesheet" /> <script src="/Scripts/modernizr-2.8.3.js"></script> <div class="humburger" id="hambuger_menu"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <section class="menu_body" id="menubody"> <div class="menu_body__item_wrapper"> <!-- menu list--> <ul class="menu_list"> <li><a href="#">Home</a></li> <!-- have submenu--> <li class="has_child"> <a href="#">About</a> <ul class="sub-menu"> <li><a href="#">Who We Are</a></li> <li><a href="#">Managment</a></li> </ul> </li> <!-- have submenu--> <li class="has_child"> <a href="javascript">Projects</a> <ul class="sub-menu"> <li><a href="#">Ongoing</a></li> <li><a href="#">Complete</a></li> </ul> </li> <li><a href="#">Brochure</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </section> @*<script src="/path/to/cdn/jquery.min.js"></script>*@ <script src="~/Scripts/jquery-3.4.1.min.js"></script> <script src="~/Scripts/jquery-3.4.1.js"></script> <script src="~/Scripts/bootstrap.js"></script> <script src="~/Scripts/JavaScript.js"></script> @*<div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div>
1 個解決方案
解決方案1
1 2021-07-19 02:30:15
對於在項目中難以使用它的其他任何人，這是我為使其在 Visual Studio 2019 中工作所做的工作，您當然需要匹配我的文件/文件夾結構以獲取鏈接和腳本，或更改它們以匹配您項目中自己的文件/文件夾結構。
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Responsive Multi-level Hamburger Nav Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css">
<link href="~/Content/style.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<style>
body {
background: #f7f7f7;
}
.lead {
font-size: 1.5rem;
font-weight: 300;
}
.container {
margin: 0 auto;
max-width: 960px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Multi-level Hamburger Nav Example</h1>
<p class="lead">A responsive, mobile-friendly, multi-level hamburger navigation system (also called offcanvas menu) written in JavaScript (jQuery) and CSS/CSS3.</p>
</div>
<!-- hamburger section-->
<div class="humburger" id="hambuger_menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<!--main menu body-->
<section class="menu_body" id="menubody">
<div class="menu_body__item_wrapper">
<!-- menu list-->
<ul class="menu_list">
<li><a href="#">Home</a></li>
<!-- have submenu-->
<li class="has_child">
<a href="#">About</a>
<ul class="sub-menu">
<li><a href="#">Who We Are</a></li>
<li><a href="#">Managment</a></li>
</ul>
</li>
<!-- have submenu-->
<li class="has_child">
<a href="javascript">Projects</a>
<ul class="sub-menu">
<li><a href="#">Ongoing</a></li>
<li><a href="#">Complete</a></li>
</ul>
</li>
<li><a href="#">Brochure</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<script src="~/Scripts/JavaScript.js"></script>
</body>
</html>
$(document).ready(function () {
//alert("Menu");
console.log("in (document).ready function");
var display_width = $(window).width();
var hamburger = $("#hambuger_menu");
var menu = $("#menubody");
$(hamburger).click(function (e) {
menu.toggleClass("open");
hamburger.toggleClass("open");
});
$(".menu_body__item_wrapper li.has_child").each(function (index) {
$(this).click(function (event) {
$('.sub-menu').eq(index).slideToggle();
event.preventDefault();
event.stopImmediatePropagation();
});
$('.sub-menu').click(function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
})
})
});
漢堡菜單 - 為什么我的代碼不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.