页面加载时折叠侧边栏

Question

Iam working on a C# MVC project. It works perfectly until today i come across a problem.

I added a new view to the project. It works correctly. But i need to collapse the sidebar when the page loads. The sidebar collapse when i click the collapse button. But i need it on page load.

i found this Question : But it didn't help me, as in the answer said i tried adding javascript

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

but i come across an error Uncaught Error: Collapse is transitioning .

Here is my layout header code :

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

This is how it looks like:

What i need in page load is something like :

UPDATE

My sidebar code

    <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

So, if clicking works on your sidebartoggler button, you can simply click it using code.

like here:

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

Answer 2

it seems you put . selector for sidebartoggler , it should be # since it is an id selector not a class selector;

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

More Info

Answer 3

Please try this one

<div class="collapse navbar-collapse">

add collapse class

Answer 4

You can use "data-toggle" and "data-target" properties of the bootstrap to achieve this functionality.

This is main toggle button:

<button type="button" class="btn btn-info collapsed" data-toggle="collapse" data-target="#demo" aria-expanded="false">Simple collapsible</button>

Below is div which you want to toggle:

<div id="demo" class="collapse" aria-expanded="false" style="height: 0px;">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>

So you just to need add 'toggle' class to your side bar div. and make sure that it doesn't contain 'in' class which means it is in expand state.

Answer 5

与 Navbar 类一起添加切换

<nav class="toggled navbar navbar-dark.....