部分视图（ASP.NET Core）中的 Bootstrap 5 Accordion 展开后无法折叠答案

【问题标题】：Bootstrap 5 Accordion in Partial View (ASP.NET Core) cannot collapse after expanded部分视图（ASP.NET Core）中的 Bootstrap 5 Accordion 展开后无法折叠
【发布时间】：2021-09-13 07:34:29
【问题描述】：

我想用 Bootstrap 5 手风琴生成 MVC 局部视图。代码如下：

索引.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.cshtml 中（不使用 Partial View ）。

索引.cshtml

Exactly the same code with _PartialView.cshtml

并且手风琴工作顺利（可以展开和折叠）。

你能帮我解决这个奇怪的行为吗？

【问题讨论】：

标签： asp.net-mvc bootstrap-5 asp.net-mvc-partialview

【解决方案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>

【讨论】：