Мой "Гамбургер" не загрузит мой неупорядоченный список

Question

Я пытаюсь включить меню стиля "Гамбургер" на мою страницу, когда оно достигает размера "md". Меню гамбургера появляется, но когда я нажимаю на него, ничего не происходит.

Я пытался извлечь некоторые классы из некоторых тегов, но он довольно сильно зависит от классов начальной загрузки, поэтому я не могу этого сделать.

Когда я убираю класс "sidebar" из div с id = "mySidebar", гамбургер работает, чтобы отобразить UL, но список не свернется обратно в гамбургер. Кроме того, он разрушает меню, когда его размер не равен «md», поэтому я не думаю, что это хорошее решение.

Я также связал свой jQuery до моей начальной загрузки.

Я хочу сохранить свой стиль для страницы, когда она в полном размере, но когда она уменьшается до MD или меньше, использовать меню гамбургера. Меню гамбургера должно отображать и скрывать все меню и быть доступным только в том случае, если экран имеет меньший размер.

-Invosuite

                <button class="navbar-toggler navbar-dark bg-dark" data-toggle="collapse" data-target="#collapse_target">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </div>

        <div id="mySidebar" class="sidebar sidebar-grid">
            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
                <div data-scrollbar="true" data-height="100%" data-init="true" style="overflow: hidden; width: auto; height: 100%;">
                    <div class="collapse navbar-collapse" id="collapse_target">
                        <ul class="nav navbar-nav">
                            <li class="nav-header nav-item dropdown">New Pages</li>
                            <!-- Links Pages -->
                            <li class="has-sub nav-link">
                                <a asp-page="/LinksPages/DashboardLinks">
                                    <i class="fas fa-users"></i>
                                    <span>Links</span>
                                </a>
                            </li>
                            <!-- Extrusion Dept Pages-->
                            <li class="has-sub nav-link">
                                <a asp-page="/ExtrusionDept/DashboardLotNumberLog">
                                    <i class="fas fa-users"></i>
                                    <span>Lot Number Log</span>
                                </a>
                            </li>
                            <li class="nav-header">Usable Pages</li>
                            <!-- Customer Pages -->
                            <li class="has-sub">
                                <a asp-page="/CustomerPages/DashboardCustomer">
                                    <i class="fas fa-users"></i>
                                    <span>Customers</span>
                                </a>
                            </li>
                            <!-- Requisition Pages -->
                            <li class="has-sub">
                                <a asp-page="/RequisitionPages/DashboardRequisition">

Вот мои сценарии вверху моего файла.

<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="868070943934-0de347s86s6mpd53uajacok30k5vlud0.apps.googleusercontent.com">
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<!-- ================== BEGIN BASE CSS STYLE ================== -->
@*<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />*@
<link href="~/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<link href="~/assets/plugins/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/assets/plugins/font-awesome/5.5.0/css/all.css" rel="stylesheet" />
<link href="~/assets/plugins/animate/animate.min.css" rel="stylesheet" />
<link type="text/css" id="dark-mode" rel="stylesheet" href="">
<style type="text/css" id="dark-mode-custom-style"></style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- ================== Default Style ================== -->
<link href="~/assets/css/default/style.min.css" rel="stylesheet" />
<link href="~/assets/css/default/style-responsive.min.css" rel="stylesheet" />
<link href="~/assets/css/default/theme/default.css" rel="stylesheet" id="theme" />
<!-- ================== END ================== -->

Вот сценарии внизу моей страницы

<script src="~/js/site.js" asp-append-version="true"></script>
<!-- ================== BEGIN BASE JS ================== -->
<script src="../assets/plugins/jquery/jquery-3.3.1.min.js"></script>
<script src="../assets/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="../assets/plugins/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<script src="../assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="../assets/plugins/js-cookie/js.cookie.js"></script>
<script src="../assets/js/theme/default.min.js"></script>
<script src="../assets/js/apps.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- ================== END BASE JS ================== -->
<!-- ================== BEGIN PAGE LEVEL JS ================== -->
<script src="../assets/plugins/highlight/highlight.common.js"></script>
<script src="../assets/js/demo/render.highlight.js"></script>

Answer 1

Это работает для меня. Возможно пересмотреть порядок и версию скриптов. Я использую jQuery 3.3.1, а затем Bootstrap 4.3.1:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
                <button class="navbar-toggler navbar-dark bg-dark" data-toggle="collapse" data-target="#collapse_target">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </div>

        <div id="mySidebar" class="sidebar sidebar-grid">
            <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;">
                <div data-scrollbar="true" data-height="100%" data-init="true" style="overflow: hidden; width: auto; height: 100%;">
                    <div class="collapse navbar-collapse" id="collapse_target">
                        <ul class="nav navbar-nav">
                            <li class="nav-header nav-item dropdown">New Pages</li>
                            <!-- Links Pages -->
                            <li class="has-sub nav-link">
                                <a asp-page="/LinksPages/DashboardLinks">
                                    <i class="fas fa-users"></i>
                                    <span>Links</span>
                                </a>
                            </li>
                            <!-- Extrusion Dept Pages-->
                            <li class="has-sub nav-link">
                                <a asp-page="/ExtrusionDept/DashboardLotNumberLog">
                                    <i class="fas fa-users"></i>
                                    <span>Lot Number Log</span>
                                </a>
                            </li>
                            <li class="nav-header">Usable Pages</li>
                            <!-- Customer Pages -->
                            <li class="has-sub">
                                <a asp-page="/CustomerPages/DashboardCustomer">
                                    <i class="fas fa-users"></i>
                                    <span>Customers</span>
                                </a>
                            </li>
                            <!-- Requisition Pages -->
                            <li class="has-sub">
                                <a asp-page="/RequisitionPages/DashboardRequisition">