引导5手风琴在部分视图(ASP.. NET Core)在扩展后不能崩溃

Question

我想生成一个带有Bootstrap 5手风琴的MVC部分视图。下面是代码:

Index.cshtml

@{
ViewData["Title"] = "Home Page";
}

<input type="button" class="load_btn" id="1" value="Load" />
<div id="pv-1"></div>

@section Scripts
{
<script type="text/javascript">
$(function () {
$(".load_btn").click(function () {
var div_id = 'pv-' + $(this).attr('id');
$.ajax({
type: "GET",
url: "/Home/PV",
success: function (response) {
$('#' + div_id).empty();
$('#' + div_id).html(response);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
});
</script>
}

HomeController.cs

...
namespace WebApplication4.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult PV()
{
return View("_PartialView");
}
...
}
}

_PartialView.cshtml

@{
Layout = null;
}
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.css" />
<div class="accordion" id="2">
<div class="accordion-item">
<h2 class="accordion-header" id="h-1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-1" aria-expanded="false" aria-controls="c-1">
First Button
</button>
</h2>
<div id="c-1" class="accordion-collapse collapse" aria-labelledby="h-1">
<div class="accordion-body">
TO DO
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="h-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-2" aria-expanded="false" aria-controls="c-2">
Second Button
</button>
</h2>
<div id="c-2" class="accordion-collapse collapse" aria-labelledby="h-2">
<div class="accordion-body">
TO BE
</div>
</div>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.bundle.js"></script>

点击"加载"按钮，我就可以成功获得Accordion，我也可以展开每个项目，但是我不能折叠展开的项目.

在另一个测试中，我将手风琴放在Index中。(不使用分部视图)。

Index.cshtml

Exactly the same code with _PartialView.cshtml

和Accordion工作顺利(可以展开和折叠)。

你能帮我解释一下这种奇怪的行为吗?

Answer 1

css文件和js文件不应该出现在_PartialView中。cshtml文件。在删除这些文件后修复了奇怪的行为(展开后无法折叠)。

_PartialView.cshtml新代码

@{
Layout = null;
}
<div class="accordion" id="2">
<div class="accordion-item">
<h2 class="accordion-header" id="h-1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-1" aria-expanded="false" aria-controls="c-1">
First Button
</button>
</h2>
<div id="c-1" class="accordion-collapse collapse" aria-labelledby="h-1">
<div class="accordion-body">
TO DO
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="h-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-2" aria-expanded="false" aria-controls="c-2">
Second Button
</button>
</h2>
<div id="c-2" class="accordion-collapse collapse" aria-labelledby="h-2">
<div class="accordion-body">
TO BE
</div>
</div>
</div>
</div>