Bootstrap 可折叠面板不折叠答案

【问题标题】：Bootstrap Collapsible Panel not collapsingBootstrap 可折叠面板不折叠
【发布时间】：2016-01-28 13:31:17
【问题描述】：

我正在尝试制作一个可折叠面板，但是当按下时，什么也没有发生。

这是我正在使用的 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>
}

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery css asp.net-mvc twitter-bootstrap

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

【讨论】：

试过那个代码，和以前一样，按下没有任何反应。
在这里工作，因此可以发布您在该页面上使用的 js。
页面上没有直接的JS，我用过的JS文件都在我的帖子里引用了。我唯一的小内联部分是： $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); });哪个不应该有任何影响？
我想赶快把你的 Script.Render 拿出来看看问题是否存在。显然，其他功能可能会受到影响。
James，在不了解所有底层 js 文件以及框架和库的版本的情况下，很难识别它。我建议一次从捆绑包中取出一个库，看看哪个有影响。还要检查版本之间的任何相互依赖关系和兼容性。在此之前，请检查您的浏览器控制台是否没有可以突出显示任何内容的输出。祝你好运。

【解决方案2】：

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

希望对您有所帮助。

【讨论】：

感谢您的意见，我在 3.x.x。我发现问题在于 JS 文件冲突。

【解决方案3】：

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

【讨论】：

感谢您提供帮助，但您显然没有阅读我的问题，只是给我发了一个链接，指向我已经看过的内容，然后从中复制粘贴。