javascript - 单击链接后如何避免左侧栏菜单折叠？mvc
问题描述
我有一个 sidenav 菜单，它贴在左侧，但是当我单击任何链接时，菜单会折叠。单击一个链接并刷新页面时，我希望菜单显示我已单击的链接。
在单击菜单上的一个选项时，它会将我带到我选择的页面，但理想情况下，我希望菜单显示我在哪个页面enter code here上，而不会再次折叠。
<div class="container-fluid body-content">
<hr />
<div class="wrapper">
<nav id="sidebar">
<div class="sidebar-header">
<span style="font-size:18px;">Welcome</span>
</div>
<div id="sidebar-menu1" style="width: 263px;">
<ul id="nav" class="nav collapse in">
<li class="panel">
<a href="@Url.Action("Create", "INDICATORs")">New KPI</a>
</li>
<li class="panel">
<a href="@Url.Action("Index", "INDICATORs")">KPI List</a>
</li>
<li class="panel">
<a href="#products-sub" data-toggle="collapse" data-parent="#nav">Manage Database Options<span class="pull-right glyphicon glyphicon-menu-left" aria-hidden="true"></span></a>
<ul id="products-sub" class="collapse nav">
<li class="panel">
<a class="submenufont" href="#billeder-sub" data-toggle="collapse" data-parent="#products-sub">Manage hierarchies<span class="caret"></span></a>
<ul id="billeder-sub" class="collapse nav">
<li><a href="@Url.Action("Create", "Indicator_SubGroup")">Indicator_SubGroup</a></li>
<li><a href="@Url.Action("Create", "Ref_SubGroup")">Ref_SubGroup</a></li>
<li><a href="@Url.Action("Create", "Ref_Destination_Domain")">Ref_Destination_Domain"</a></li>
<li><a href="@Url.Action("Create", "Ref_Section")">Ref_Section</a></li>
<li><a href="@Url.Action("Create", "Ref_Frequency")">Ref_Frequency</a></li>
<li><a href="@Url.Action("Create", "Ref_IndicatorArea")">Ref_IndicatorArea</a></li>
</ul>
</li>
<li class="panel">
<a class="submenufont" href="#Manage-Data" data-toggle="collapse" data-parent="#products-sub">Manage Data sources<span class="caret"></span></a>
<ul id="Manage-Data" class="collapse nav">
<li><a href="@Url.Action("Create", "Ref_DataSource")">Ref_DataSource</a></li>
</ul>
</li>
<li class="panel">
<a class="submenufont" href="#Manage-Validations" data-toggle="collapse" data-parent="#products-sub">Manage Validations<span class="caret"></span></a>
<ul id="Manage-Validations" class="collapse nav">
<li><a href="@Url.Action("Create", "Ref_Validation")">Ref_Validation</a></li>
<li><a href="@Url.Action("Create", "Ref_AssuranceCommittee")">Ref_AssuranceCommittee</a></li>
<li><a href="@Url.Action("Create", "Ref_Exception")">Ref_Exception</a></li>
</ul>
</li>
<li class="panel">
<a class="submenufont" href="#Manage-Values" data-toggle="collapse" data-parent="#products-sub">Manage Values<span class="caret"></span></a>
<ul id="Manage-Values" class="collapse nav">
<li><a href="@Url.Action("Create", "Ref_IndicatorValueType")">Ref_IndicatorValueType</a></li>
<li><a href="@Url.Action("Create", "Ref_Domain_POD_Mapping")">Ref_Domain_POD_Mapping</a></li>
<li><a href="@Url.Action("Create", "Ref_Report_Sources")">Ref_Report Sources</a></li>
<li><a href="@Url.Action("Create", "Ref_Numerator")">Ref_Numerator</a></li>
<li><a href="@Url.Action("Create", "Ref_Demoninator")">Ref_Denominator</a></li>
</ul>
</li>
<li class="panel">
<a class="submenufont" href="#Manage-Database-Access" data-toggle="collapse" data-parent="#products-sub">Manage Database Access<span class="caret"></span></a>
`enter code here` <ul id="Manage-Database-Access" class="collapse nav">
<li><a href="@Url.Action("Create", "Ref_DatabaseUser")">Ref_DatabaseUser</a></li>
</ul>
</li>
<li class="panel">
<a class="submenufont" href="#Manager-Dashboards" data-toggle="collapse" data-parent="#products-sub">Manager Dashboards<span class="caret"></span></a>
<ul id="Manager-Dashboards" class="collapse nav">
<li><a href="@Url.Action("Create", "Ref_PowerBI_Dashboard")">Ref_PowerBI_Dashboard</a></li>
</ul>
</li>
<li class="panel">
<a class="submenufont" href="#Manager-Areas" data-toggle="collapse" data-parent="#products-sub">Manager Areas<span class="caret"></span></a>
<ul id="Manager-Areas" class="collapse nav">
<li><a href="@Url.Action("Create", "Ref_Division")">Ref_Division</a></li>
<li><a href="@Url.Action("Create", "Ref_Directorate")">Ref_Directorate</a></li>
<li><a href="@Url.Action("Create", "Ref_Wards")">Ref_Wards</a></li>
</ul>
</li>
<li class="panel">
<a class="submenufont" href="#Manage-Targets" data-toggle="collapse" data-parent="#products-sub">Manage Targets<span class="caret"></span></a>
<ul id="Manage-Targets" class="collapse nav">
<li><a href="@Url.Action("Create", "Ref_Indicator_Corporate_Targets")">Ref_Indicator_Corporate_Targets</a></li>
<li><a href="@Url.Action("Create", "Ref_Inidcator_DIV_Targets")">Ref_Inidcator_DIV_Target</a></li>
<li><a href="@Url.Action("Create", "Ref_Indicator_DIR_Targets")">Ref_Indicator_DIR_Targets</a></li>
<li><a href="@Url.Action("Create", "Ref_Indicator_Location_Target")">Ref_Indicator_Location_Target</a></li>
<li><a href="@Url.Action("Create", "Ref_Indicator_DIR_Targets")">Ref_Indicator_Project_Targets</a></li>
<li><a href="@Url.Action("Create", "Ref_TargetComparison")">Ref_TargetComparison</a></li>
</ul>
</li>
</ul>
</li>
<li class="panel">
<a href="#Allocations" data-toggle="collapse" data-parent="#nav">Allocations<span class="pull-right glyphicon glyphicon-menu-left" aria-hidden="true"></span></a>
<ul id="Allocations" class="collapse nav">
<li>
<a href="#">Allocate to groups/subgroups</a>
</li>
<li>
<a href="#">Allocate to dashboards</a>
</li>
<li>
<a href="#">Allocate to Domains</a>
</li>
</ul>
</li>
<li class="panel">
<a href="#Multiple-Allocations" data-toggle="collapse" data-parent="#nav">Multiple Allocations<span class="pull-right glyphicon glyphicon-menu-left" aria-hidden="true"></span></a>
<ul id="Multiple-Allocations" class="collapse nav">
<li>
<a href="@Url.Action("Create", "Indicator_SubGroup")">Indicator_SubGroup</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_Area")">Indicator_Area</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_Assurance")">Indicator_Assurance</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_Directorate")">Indicator_Directorate</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_Division")">Indicator_Division</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_Exception")">Indicator_Exception</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_Executive")">Indicator_Executive</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_PowerBI")">Indicator_PowerBI</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_SignOff")">Indicator_SignOff</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_Source")">Indicator_Source</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_Specialties")">Indicator_Specialties</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_toShow")">Indicator_toShow</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_User")">Indicator_User</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_Validation")">Indicator_Validation</a>
</li>
<li>
<a href="@Url.Action("Create", "Indicator_Wards")">Indicator_Wards</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div id="content">
@RenderBody()
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="@Url.Action("Create", "INDICATORs")">NGH KPI</a>
</div>
<img style="width: 250px;float:right" src="~/Content/images/ngh_white_transp.png" alt="Card image cap">
</div>
</div>
<br />
<br />
<br />
<br />
<br />
<footer>
<p>© @DateTime.Now.Year - NGH Indicators</p>
</footer>
</div>
</div>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/chosen.jquery.js"></script>
<script src="~/Scripts/menutoggle.js"></script>
@RenderSection("scripts", required: false)
JS
$(document).ready(function () {
$('#sidebar-menu1 .collapse').on('show.bs.collapse', function (event) {
$(this).prev("a").children(".glyphicon-menu-left").removeClass("glyphicon-menu-left").addClass("glyphicon-menu-down");
event.stopPropa`enter code here`gation();
}).on('hide.bs.collapse', function (event) {
$(this).prev("a").children(".glyphicon-menu-down").removeClass("glyphicon-menu-down").addClass("glyphicon-menu-left");
event.stopPropagation();
});
});
解决方案
推荐阅读
- spring-cloud-gateway - spring api网关根据requestbody中的对象处理请求
- angular - 如果这些数据依赖于几个 Observable，如何在 FormGroup 中显示 FormArray 数据？
- android - Android MediaProjection - VirtualDisplay 和 ImageReader 的合适分辨率是多少？
- javascript - 提交联系表单后如何添加成功/错误警报？（节点邮件程序）
- python - 无法在其他环境中从 Mac 上的 Anaconda Navigator 启动 Jupyter 笔记本
- typescript - 如何在打字稿中选择一个嵌套类型的泛型来创建新的？
- python - 如何每...分钟运行一次（pyTelegramBotAPI）
- python - Telnetlib 不会因大量输出而退出
- javascript - 如何录制音频流？
- cloud-foundry - 在 Pivotal Cloud Foundry 上部署 Web 应用程序时文件上传（和其他按钮）的零星错误