折叠页面加载上的侧栏

Question

我正在从事C＃MVC项目。它完美地运作直到今天我遇到了一个问题。

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

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

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

但我遇到了错误Uncaught Error: Collapse is transitioning。

这是我的布局标题代码：

<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

因此，如果点击适用于sidebartoggler按钮，则只需使用代码点击即可。

喜欢这里：

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

Answer 2

似乎您为.添加了sidebartoggler选择器，它应该是#，因为它是id选择器而不是class选择器;

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

More Info

Answer 3

请尝试这个

<div class="collapse navbar-collapse">

添加崩溃类

Answer 4

您可以使用引导程序的“data-toggle”和“data-target”属性来实现此功能。

这是主切换按钮：

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

下面是您要切换的div：

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

所以你只需要将'toggle'类添加到你的侧栏div。并确保它不包含'in'类，这意味着它处于展开状态。

Answer 5

连同导航栏类一起添加切换

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