我的ASP.NET核心应用程序在_Layout.cshtml中有一个菜单，其中有可折叠的部分，但是当我单击给定部分中的某个项目时，该部分会折叠，我希望保持它的展开状态。但我不知道该怎么做，我想从OnGet（）剃刀方法修改引导菜单，但我不愿意在剃刀方法中使用JavaScript。有没有更简单的方法？
以下是我的布局文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - AppliPerso</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/AppliPerso.styles.css" asp-append-version="true" />
<style>
body {
margin-top: 20px;
margin-left: 0px;
}
.glyphicon {
margin-right: 10px;
}
.panel-body {
padding: 0px;
}
.panel-body table tr td {
padding-left: 15px
}
.panel-body .table {
margin-bottom: 0px;
}
.container {
margin-top: 10px;
margin-left: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- menu-->
<div class="col-sm-3 col-md-3 leftMenu" style="position:sticky;top:20px">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="glyphicon glyphicon glyphicon-question-sign">
</span>Projet Euler
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon glyphicon-ok text-primary"></span><a href="Euler1">Problème n°1</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon glyphicon-ok text-primary"></span><a href="Euler2">Problème n°2</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<span class="glyphicon glyphicon-th">
</span>Modules
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Orders</a> <span class="label label-success">$ 320</span>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Invoices</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Shipments</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Tex</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<span class="glyphicon glyphicon-user">
</span>Account
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Change Password</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Notifications</a> <span class="label label-info">5</span>
</td>
</tr>
<tr>
<td>
<a href="http://www.jquery2dotnet.com">Import/Export</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-trash text-danger"></span><a href="http://www.jquery2dotnet.com" class="text-danger">
Delete Account
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
<span class="glyphicon glyphicon-file">
</span>Reports
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<table class="table">
<tr>
<td>
<span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Sales</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Customers</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-tasks"></span><a href="http://www.jquery2dotnet.com">Products</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-shopping-cart"></span><a href="http://www.jquery2dotnet.com">Shopping Cart</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- page principale -->
<div class="body-container col-sm-9 col-md-9 panel">
@RenderBody()
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>字符串
下面是一个使用此布局的页面：
@page
@using Euler.MyFeature.Pages;
@model Euler.MyFeature.Pages.Euler1Model
<div class="row" style="background-color:red">
<div class="col">
<h1 style="text-align:center">Résolution du projet Euler 1</h1>
</div>
</div>
<div class="row">
<div class="col">
<p> Voici la somme des entiers de 1 à 1000 qui sont divisibles par 3 ou 5: @Model.sum</p>
</div>
</div>型
谢谢你的好意
编辑你好，Quing Gui，这里有一个简短的视频，显示了点击后菜单折叠：
的数据
祝你今天过得愉快
1条答案
按热度按时间5kgi1eie1#
你想要下面这样的东西：在视图中加载外部网站？
尝试在布局中添加以下代码，并将http更改为https（如：https://www.jquery2dotnet.com）：
字符串
结果：
的数据