Question

我正在尝试制作一个可折叠的面板，但是当按下时，没有任何反应。

以下是我正在使用的CSS文件：

// Loads all of the CSS styling files needed for view pages to display correctly.
bundles.Add(new StyleBundle("~/Content/css").Include(
          "~/Content/bootstrap.css",
          "~/Content/jasny-bootstrap.css",
          "~/Content/PagedList.css",
          "~/Content/bootstrap-datetimepicker.css",
          "~/Content/Site.css"));

以下是我正在使用的所有JS文件：

// Loads all of the JavaScript files that are needed for view pages to function
// correctly.
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
          "~/Scripts/moment.js",
          "~/Scripts/moment-with-locales.js",
          "~/Scripts/jquery-2.1.4.min.js",
          "~/Scripts/bootstrap.js",
          "~/Scripts/jasny-bootstrap.js",
          "~/Scripts/respond.js",
          "~/Scripts/bootstrap-datetimepicker.js",
          "~/Scripts/jquery-ui-i18n.js"));

然后使用以下方式呈现这些：

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/bootstrap")

现在我可以使用可折叠面板的实际代码：

@using (Html.BeginForm("Index", "Item", FormMethod.Get, new { @class = "form-inline" }))
{
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapse">Collapsible Group</a>
            </h4>
        </div>
        <div id="collapse" class="panel-collapse collapse">
            <div class="panel-body">
                Everything goes here...
            </div>
        </div>
    </div>
}

非常感谢任何帮助。

Answer 1

首先阅读链接：http://getbootstrap.com/javascript/#collapse

但以下内容会有所帮助：

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a role="button" data-toggle="collapse" href="#collapseID" aria-expanded="false" aria-controls="collapseID">Collapsible Group</a>
        </h4>
    </div>
    <div id="collapseID" class="panel-collapse collapse">
        <div class="panel-body">
            Everything goes here...
        </div>
    </div>
</div>

Answer 2

您还没有提到您正在使用的Bootstrap版本。默认情况下，Visual Studio安装Bootstrap V 2.x.x，我在许多情况下都不支持手风琴/折叠，V 3.x.x，尝试将Nuget包更新到最新版本，你应该很高兴。

希望有所帮助。

Answer 3

尝试使用此模板 Bootstrap Accordion example 使用此标记data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"

Bootstrap可折叠面板不会折叠

3 个答案: