ページ上のサイドバーを折りたたむload

Question

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> 

Answer 1

だから、あなたのsidebartogglerボタンに作品をクリックした場合、あなたは単にコードを使用して、それをクリックすることができます。ここのような

：

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

Answer 2

あなたがsidebartogglerため.セレクタを置くことがidセレクタないclassセレクタであるから、それは#する必要がありそうです。

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

More Info

Answer 3

この1つの

<div class="collapse navbar-collapse"> 

追加崩壊クラスを試してみてください

Answer 4

あなたが達成するために、「データ・トグル」と「データ・ターゲット」のブートストラップのプロパティを使用することができますこの機能。

これは、メインのトグルボタンである：以下

<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'クラスが含まれていないことを確認してください。