Question

当页面尺寸达到“ md”大小时，我正在尝试将“汉堡包”样式菜单合并到我的页面中。出现汉堡菜单，但是当我单击它时，什么也没发生。

我尝试从某些标签中取出一些类，但是它在很大程度上依赖于bootstrap类，因此我无法做到这一点。

当我使用id =“ mySidebar”从div中删除“ sidebar”类时，汉堡包将显示UL，但列表不会退回到汉堡包中。另外，当菜单的大小不在“ md”大小时，它会破坏菜单，所以我认为这不是一个很好的解决方法。

我在Bootstrap之前也链接了jQuery。

我希望能够在页面全尺寸时保持样式，但是当页面缩小至MD或更小尺寸时，可以使用汉堡菜单。汉堡菜单应该能够显示和隐藏整个菜单，并且只有在屏幕较小时才可用。

-发票

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

我的“汉堡包”不会加载我的未列表

1 个答案: