javascript - 页面加载时折叠侧边栏

Question

我正在开发一个 C# MVC 项目。它运行得很好，直到今天我遇到了一个问题。

我向项目添加了一个新 View 。它工作正常。但我需要在页面加载时折叠侧边栏。当我单击折叠按钮时，侧边栏会折叠。但我在页面加载时需要它。

我发现this Question :但这对我没有帮助，因为在答案中说我尝试添加 javascript

$(document).ready(function () {
    $('.sidebartoggler').collapse('toggle');
})

但我遇到了一个错误 Uncaught Error :折叠正在转换。

这是我的布局标题代码:

<header class="topbar">
        <nav class="navbar top-navbar navbar-toggleable-sm navbar-light">
            <!-- ============================================================== -->
            <!-- Logo -->
            ....// code
            <div class="navbar-collapse">
                <!-- ============================================================== -->
                <!-- toggle and nav items -->
                <!-- ============================================================== -->
                <ul class="navbar-nav mr-auto mt-md-0">
                    <!-- This is  -->
                    <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up text-muted waves-effect waves-dark" href="javascript:void(0)"><i class="mdi mdi-menu"></i></a> </li>
                    <li class="nav-item"> <a class="nav-link sidebartoggler hidden-sm-down text-muted waves-effect waves-dark" href="javascript:void(0)" id="sidebartoggler"><i class="ti-menu"></i></a> </li>
                    <!-- ============================================================== -->
                    <!-- Search -->
                    ....// code
                    <!-- Messages -->
                    ....// code

                </ul>
                <!-- ============================================================== -->
                <!-- User profile and search -->
                <!-- ============================================================== -->
                <ul class="navbar-nav my-lg-0">
                    <!-- ============================================================== -->
                    <!-- Comment -->
                    ....// code
                    <!-- ============================================================== -->
                    <!-- Messages -->                        
                    ....// code
                    <!-- ============================================================== -->

                    <!-- Language -->
                    ....// code
                </ul>
            </div>
        </nav>
    </header>

它是这样的:

我在页面加载中需要的是:

更新

我的侧边栏代码

    <aside class="left-sidebar">
        <div class="scroll-sidebar">
            <div class="user-profile">
                <div class="profile-text">


                    <div class="dropdown-menu animated flipInY">
                        <a href="~/Company/Index" class="dropdown-item"><i class="ti-user"></i> Company</a>
                        <a href="#" class="dropdown-item"><i class="ti-user"></i> My Profile</a>
                        <a href="#" class="dropdown-item"><i class="ti-wallet"></i> My Balance</a>
                        <a href="#" class="dropdown-item"><i class="ti-email"></i> Inbox</a>
                        <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"><i class="ti-settings"></i> Account Setting</a>
                        <div class="dropdown-divider"></div> <a href="~/Account/Logout" class="dropdown-item"><i class="fa fa-power-off"></i> Logout</a>
                    </div>
                </div>
            </div>

            <nav class="sidebar-nav">
                <ul id="sidebarnav">
                    <li><a href="~/Company/_CompanyDetails"><i class="fa fa-home"></i>Company</a></li>
                    <li>
                        <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-gauge"></i><span class="hide-menu">Admin Tables </span></a>
                        <ul aria-expanded="false" class="collapse">
                            <li><a href="~/Countries/Index">Countries</a></li>
                            <li><a href="~/State/Index">State</a></li>
                            <li><a href="~/Tax/Index">Tax</a></li>
                            <li><a href="~/Role/Index">Roles</a></li>
                            <li><a href="~/Branch/Index">Branches</a></li>
                        </ul>
                    </li>
                    <li>
                        <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="fa fa-group"></i><span class="hide-menu">Contacts</span></a>
                        <ul aria-expanded="false" class="collapse">
                            <li><a href="~/Customer/Index">Customers</a></li>
                            <li><a href="~/Customer/ProspectFollowup">Prospect Followup</a></li>
                        </ul>
                    </li>
                    <li>
                        <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="fa fa-cart-plus"></i><span class="hide-menu">Item</span></a>
                        <ul aria-expanded="false" class="collapse">
                            <li><a href="~/Item/Index">Items</a></li>
                            <li><a href="~/ItemCategories/Index">Item Category</a></li>
                            <li><a href="~/ItemBrand/Index">Item Brands</a></li>
                            <li><a href="~/ItemManufacture/Index">Item Manufacturer</a></li>
                            <li><a href="~/Warehouse/Index">Warehouse</a></li>
                        </ul>
                    </li>
                    <li>
                        <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="fa fa-shopping-cart"></i><span class="hide-menu">Purchase Order</span></a>
                        <ul aria-expanded="false" class="collapse">
                            <li>
                                <a href="~/Purchase/Index"><i class="fa fa-shopping-cart"></i>Purchase Order</a>
                            </li>
                            <li>
                                <a href="~/Bill/Index"><i class="fa fa-credit-card "></i>Bill</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="~/SalesOrder/Index"><i class="fa fa-line-chart"></i>Sales Order</a></li>
                    <li>
                        <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="fa fa-user-plus"></i><span class="hide-menu">Users</span></a>
                        <ul aria-expanded="false" class="collapse">
                            <li><a href="~/User/Index">Users</a></li>
                        </ul>
                    </li>
                    <li>
                        <a class="has-arrow waves-effect waves-dark" href="#" aria-expanded="false"><i class="mdi mdi-view-grid"></i><span class="hide-menu">Other</span></a>
                        <ul aria-expanded="false" class="collapse">
                            <li><a href="~/PermissionFunction/Index">Permission Function</a></li>
                            <li><a href="~/PaymentMode/Index">Payment Mode</a></li>
                            <li><a href="~/DocNoFormat/Index">Document Format</a></li>
                            <li><a href="~/Unit/Index">Unit</a></li>
                        </ul>
                    </li>
                    <li><a href="~/Report/Index"><i class="fa fa-line-chart"></i>Report</a></li>
                </ul>
            </nav>
            <!-- End Sidebar navigation -->
        </div>
        <!-- End Sidebar scroll-->
        <!-- Bottom points-->
        <div class="sidebar-footer">

            <a href="#" class="link" data-toggle="tooltip" title="Settings"><i class="ti-settings"></i></a>

            <a href="#" class="link" data-toggle="tooltip" title="Email"><i class="mdi mdi-gmail"></i></a>

            <a href="~/Account/Logout" class="link" data-toggle="tooltip" title="Logout"><i class="mdi mdi-power"></i></a>
        </div>
    </aside>

Answer 1

因此，如果单击侧边栏切换器按钮有效，您只需使用代码单击它即可。

像这里:

$(document).ready(function () {
    $('#sidebartoggler').click();
});