为什么我的汉堡菜单示例代码不起作用？

Question

I'm trying to get this hamburger menu to work我正在努力让这个汉堡菜单发挥作用

Here is the example code source https://www.jqueryscript.net/menu/responsive-multi-level-hamburger-nav.html这是示例代码源https://www.jqueryscript.net/menu/responsive-multi-level-hamburger-nav.html

I'm using Visual Studio 2019 and am not sure why this is giving me so much trouble?我正在使用 Visual Studio 2019，但不确定为什么这会给我带来这么多麻烦？ The menu either is expanded completely as text at code launch or it is 3 lines that do not respond when I click on it.菜单要么在代码启动时完全扩展为文本，要么是 3 行，当我点击它时没有响应。 The example seems pretty simplistic, but I haven't been able to get it to work like shown in the example.该示例看起来非常简单，但我无法使其像示例中所示那样工作。

[ [ CSS 和 JS 包括 1

 $(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 &raquo;</a></p> </div>

Answer 1

For anyone else that is having a hard time getting this to work in a project, here is what I did to get it to work in Visual Studio 2019, you'll of course need to match my file/folder structure for the links and scripts, or alter those to match your own file/folder structure inside your project.对于在项目中难以使用它的其他任何人，这是我为使其在 Visual Studio 2019 中工作所做的工作，您当然需要匹配我的文件/文件夹结构以获取链接和脚本，或更改它们以匹配您项目中自己的文件/文件夹结构。

The index.cshtml file contents index.cshtml 文件内容

<!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>

And in the local javascript file并在本地 javascript 文件中

$(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();
        })
    })
});

为什么我的汉堡菜单示例代码不起作用？

问题描述

1 个解决方案

解决方案1
1 2021-07-19 02:30:15

为什么我的汉堡菜单示例代码不起作用？

问题描述

1 个解决方案

解决方案1 1 2021-07-19 02:30:15

解决方案1
1 2021-07-19 02:30:15