Pourquoi mon code d'exemple de menu Hamburger ne fonctionne-t-il pas ?

Question

J'essaie de faire fonctionner ce menu hamburger.

Voici l'exemple de code source https://www.jqueryscript.net/menu/responsive-multi-level-hamburger-nav.html

J'utilise Visual Studio 2019 et je ne sais pas pourquoi cela me pose tant de problèmes. Soit le menu se développe complètement en tant que texte au lancement du code, soit il s'agit de 3 lignes qui ne répondent pas lorsque je clique dessus. L'exemple semble assez simpliste, mais je n'ai pas réussi à le faire fonctionner comme indiqué dans l'exemple.

[

$(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

Pour toute autre personne qui a du mal à faire fonctionner ceci dans un projet, voici ce que j'ai fait pour le faire fonctionner dans Visual Studio 2019, vous devrez bien sûr correspondre à ma structure de fichiers/dossiers pour les liens et les scripts, ou les modifier pour qu'ils correspondent à votre propre structure de fichiers/dossiers à l'intérieur de votre projet.

Le contenu du fichier 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>

Et dans le fichier javascript local

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