單擊鏈接后，導航欄中的子菜單崩潰

Question

我在Web應用程序的左側有一個導航欄，菜單的每個項目都有一個可擴展的子菜單來瀏覽頁面。 不幸的是，每次我單擊子菜單的鏈接之一時，都會加載新頁面，但是該子菜單會再次折疊。 我希望子菜單在單擊其鏈接之一后仍能展開。

這是我的代碼：

 <div class="container-fluid"> <div class="row"> <div class="col-md-3"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="nav-header panel panel-default"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <span class="glyphicon glyphicon-th"></span>Cluster </h4> </div> </a> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <div class="nav-item"><span class="glyphicon glyphicon-eye-open"></span>@Html.ActionLink("overview", "ClusterAll", "Cluster", new { area = "" }, new { @class = "nav-item", style = "text-decoration:none;" })</div> <div class="nav-item"><span class="glyphicon glyphicon-plus"></span>@Html.ActionLink("create", "ClusterCreation", "Cluster", new { area = "" }, new { @class = "nav-item", style = "text-decoration:none;" })</div> <div class="nav-item"><span class="glyphicon glyphicon-pencil"></span>@Html.ActionLink("edit", "ClusterEdit", "Cluster", new { area = "" }, new { @class = "nav-item", style = "text-decoration:none;" })</div> </div> </div> </div> <div class="nav-header panel panel-default"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <span class="glyphicon glyphicon-hdd"></span>Applications </h4> </div> </a> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <div class="nav-item"><span class="glyphicon glyphicon-ok"></span>@Html.ActionLink("verify", "ApplicationPortfolioEdit", "Applications", new { area = "" }, new { @class = "nav-item", style = "text-decoration:none;" })</div> <div class="nav-item"><span class="glyphicon glyphicon-list-alt"></span>@Html.ActionLink("manage", "ApplicationMassEdit", "Applications", new { area = "" }, new { @class = "nav-item", style = "text-decoration:none;" })</div> </div> </div> </div> </div> </div> </div> </div> 

實際菜單中有更多項目，這只是一個示例，其中有2個項目向您顯示。 單擊該鏈接后，我有什么想法要使子菜單保持展開狀態？ 我是網頁設計的新手，但希望您能為我提供幫助：)

Answer 1

如果我知道您要執行的操作，則可以在URL中將打開的子菜單作為＃參數傳遞，因此當他們單擊指向新頁面的鏈接時，您可以讓Javascript / jQuery閱讀＃並打開適當的子菜單。

像這樣

<a href="page.html#menuItemClicked">Applications</a>

然后，使用Javascript和jQuery，我們可以使用它進行閱讀。

 $(document).ready(function() { hash = window.location.hash; $(hash).collapse('show'); }); 

我們可以使用$(hash).collapse('show'); 顯示內容，因為您使用的是Bootstrap。

但這給人的印象是我理解您要說的話。 :)