折叠侧边栏上的页面加载

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

这是它的样子：

我需要在页面加载什么是一样的东西：

UPDATE

我的侧边栏代码

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

来源

2017-08-17 irshad jm

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

更新了我的代码 –

如果您使用[collapse插件]（https://getbootstrap.com/docs/4。0/components/collapse /），该元素通常需要'collapse'类。这个“隐藏”元素，然后切换方法添加'in'类，然后“显示”该元素。你尝试过吗？ –

所以，如果点击您sidebartoggler按钮的作品，你可以简单地点击它使用的代码。

喜欢这里：

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

来源

2017-08-17 08:48:39 Shahbaz

它仍然没有工作 –

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

否则，你也可以检查你的边栏代码，看看是否有任何CSS类将其标记为折叠或展开。你能分享一面条形码吗？ – Shahbaz

似乎你把.选择了sidebartoggler，它应该是#因为它是一个id选择不是class选择;

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

More Info

来源

2017-08-17 08:56:16

现在没有错误，但仍然无法正常工作 –

请试试这个

<div class="collapse navbar-collapse">

添加合拢类

来源

2017-08-17 09:01:31

您可以使用“数据切换”和“数据目标”引导的属性来实现这个功能。

这是主要的切换按钮：

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

下面是要切换格：

<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”类，这意味着它处于展开状态。

来源

2017-08-17 15:27:04 ravisolanki07

折叠侧边栏上的页面加载

回答

相关问题