页面加载时折叠侧边栏

Posted 2023-03-24

【中文标题】页面加载时折叠侧边栏

【英文标题】：Collapse Sidebar on Page load

【发布时间】：2018-01-25 13:47:51

【问题描述】：

我正在开发一个 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>

【问题讨论】：

也有助于查看侧边栏的标记。

更新了我的代码

如果您使用collapse plugin，该元素通常需要collapse 类。这会“隐藏”元素，然后切换方法添加 in 类，然后“显示”元素。你试过吗？

我不知道该怎么做

这就是文档的用途（我专门链接到折叠文档）。尝试审查它们。您可能还会发现这很有用：blog.codeply.com/2016/05/18/…

【参考方案1】：

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

喜欢这里：

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

【讨论】：

好的。只是为了确保点击代码有效，请尝试在页面加载后从浏览器控制台运行它。

否则，您还可以检查您的侧条码，看看是否有任何 css 类将其标记为折叠或展开。可以分享一下侧条码吗？

【参考方案2】：

添加 toggled 以及导航栏类

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

【参考方案3】：

您似乎将. 选择器放在sidebartoggler 中，它应该是#，因为它是id 选择器而不是class 选择器；

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

More Info

【参考方案4】：

请试试这个

<div class="collapse navbar-collapse">

添加折叠类

【参考方案5】：

您可以使用引导程序的“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>

因此，您只需将“切换”类添加到侧栏 div。并确保它不包含“in”类，这意味着它处于展开状态。