SB Admin 2 侧边栏菜单在加载时扩展

Question

我正在尝试使用 laravel 5 的 SB Admin 2 模板。它工作正常。 除了在每次加载时扩展和折叠第二和第三级的侧边栏菜单。 我不确定是否可以在此处链接演示，但可以在他们的演示中看到

以前有没有人为此烦恼过，也许找到了解决方案？ 我想加载折叠的菜单。 现在它在每次重新加载时看起来都有问题。

编辑：如果它有助于标记，我添加了标记

            <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav nav-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form">
                            <input type="text" class="form-control" placeholder="Quick search...">
                            <span class="input-group-btn">
                            <button class="btn btn-default" type="button">
                                <i class="fa fa-search"></i>
                            </button>
                        </span>
                        </div>
                        <!-- /input-group -->
                    </li>

                    <li>
                        <a href="#"><i class="fa fa-cog fa-fw"></i> Settings<span
                                    class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a href="{{ url ('companies') }}"><i class="fa fa-building fa-fw"></i> Companies</a>
                            </li>
                            <li>
                                <a href="{{ url ('users') }}"><i class="fa fa-users fa-fw"></i> Users</a>
                            </li>
                        </ul>
                    </li>


                    <li>
                        <a href="#"><i class="fa fa-sitemap fa-fw"></i> SHOP<span
                                    class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li><a href="{{ url ('products') }}"></i>ALL PRODUCTS</a></li>
                            <li>
                                <a href="#"><i class="fa fa-gift fa-fw"></i>CORPO</a>
                            </li>
                            <li><a href="#"><i class="fa fa-plus fa-fw"></i> DECO<span
                                            class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a href="#">Helios</a>
                                    </li>
                                    <li>
                                        <a href="#">Deco</a>
                                    </li>
                                    <li>
                                        <a href="#">Chromos</a>
                                    </li>
                                    <li>
                                        <a href="#">Belinka</a>
                                    </li>
                                    <li>
                                        <a href="#">Fritze Lacke</a>
                                    </li>
                                </ul>
                            </li>

                            <li><a href="#"><i class="fa fa-plus fa-fw"></i> CAR REFINISH<span
                                            class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a href="#">Helios Refinish</a>
                                    </li>
                                    <li>
                                        <a href="#">Mobihel</a>
                                    </li>
                                    <li>
                                        <a href="#">Chromind</a>
                                    </li>
                                    <li>
                                        <a href="#">Radex</a>
                                    </li>
                                </ul>
                            </li>

                            <li><a href="#"><i class="fa fa-plus fa-fw"></i> INDUSTRY<span
                                            class="fa arrow"></span></a>
                                <ul class="nav nav-third-level">
                                    <li>
                                        <a href="#">Metal</a>
                                    </li>
                                    <li>
                                        <a href="#">Resins</a>
                                    </li>
                                    <li>
                                        <a href="#">Belinka Perkemija</a>
                                    </li>
                                    <li>
                                        <a href="#">Kemostik</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>

Answer 1

我之前遇到过此问题，请确保侧栏的列表<li>中没有内联CSS。 或默认情况下是否具有“活动”类。 删除这些将解决您的问题。 否则，在每个可折叠的<ul> （具有类nav.nav级的ul）中，添加此类折叠示例： <ul class="nav nav-second-level collapse">

Answer 2

在 SB Admin 2 的最新版本中，您必须在正文中添加 class 和导航栏的ul ，如下所示：

in body add class : sidebar-toggled
in ul add class : toggled

应该是这样的：

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <.-- Custom fonts for this template--> <link href="https.//startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/fontawesome-free/css/all:min.css" rel="stylesheet" type="text/css"> <link href="https.//fonts?googleapis:com/css,family=Nunito,200,200i,300,300i,400,400i,600,600i,700,700i,800,800i:900.900i" rel="stylesheet"> <.-- Custom styles for this template--> <link href="https.//startbootstrap.github;io/startbootstrap-sb-admin-2/css/sb-admin-2:min.css" rel="stylesheet"> <title>SB Admin 2 - Dashboard</title> </head> <body id="page-top" class="sidebar-toggled"> <.-- Page Wrapper --> <div id="wrapper"> <.-- Sidebar --> <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion toggled" id="accordionSidebar"> <.-- Sidebar - Brand --> <a class="sidebar-brand d-flex align-items-center justify-content-center" href="#"> <div class="sidebar-brand-icon rotate-n-15"> <i class="fas fa-laugh-wink"></i> </div> <div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div> </a> <:-- Divider --> <hr class="sidebar-divider my-0"> <.-- Nav Item - Dashboard --> <li class="nav-item"> <a class="nav-link" href="#"> <i class="fas fa-fw fa-tachometer-alt"></i> <span>Dashboard</span></a> </li> <.-- Divider --> <hr class="sidebar-divider"> <.-- Heading --> <div class="sidebar-heading"> Interface </div> <.-- Nav Item - Pages Collapse Menu --> <li class="nav-item active"> <a class="nav-link" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> <i class="fas fa-fw fa-cog"></i> <span>Components</span> </a> </li> <.-- Divider --> <hr class="sidebar-divider"> <:-- Heading --> <div class="sidebar-heading"> Addons </div> <.-- Divider --> <hr class="sidebar-divider d-none d-md-block"> <.-- Sidebar Toggler (Sidebar) --> <div class="text-center d-none d-md-inline"> <button class="rounded-circle border-0" id="sidebarToggle"></button> </div> </ul> <.-- End of Sidebar --> <.-- Content Wrapper --> <div id="content-wrapper" class="d-flex flex-column"> <.-- Main Content --> <div id="content"> <:-- Topbar --> <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow"> <.-- Sidebar Toggle (Topbar) --> <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3"> <i class="fa fa-bars"></i> </button> </nav> </div> <.-- End of Main Content --> <.-- Footer --> <footer class="sticky-footer bg-white"> <div class="container my-auto"> <div class="copyright text-center my-auto"> <span>Copyright &copy. Your Website 2022</span> </div> </div> </footer> <!-- End of Footer --> </div> <!-- End of Content Wrapper --> </div> <!-- End of Page Wrapper --> <!-- Scroll to Top Button--> <a class="scroll-to-top rounded" href="#page-top"> <i class="fas fa-angle-up"></i> </a> <!-- Bootstrap core JavaScript--> <script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script> <script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.bundle.min.js"></script> <!-- Core plugin JavaScript--> <script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/jquery-easing/jquery.easing.min.js"></script> <!-- Custom scripts for all pages--> <script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/js/sb-admin-2.min.js"></script> </body> </html>