ASP.NET MVC 5 引导手风琴无法正常工作答案

【问题标题】：ASP.NET MVC 5 Bootstrap Accordion Not Working CorrectlyASP.NET MVC 5 引导手风琴无法正常工作
【发布时间】：2014-03-14 00:52:00
【问题描述】：

我正在尝试在 Bootstrap 中使用 Accordion 功能。问题是减号按钮在单击时永远不会变为加号（反之亦然）。

这是我的 HTML 代码：

<div class="container">
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    <span class="glyphicon glyphicon-minus"></span>
                    Incident Details
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                <table class="table table-bordered">
                    <tr>
                        <th>Response Text</th>
                        <th>Username</th>
                        <th>Date & Time of Update</th>
                    </tr>
                    @if (ViewBag.Data != null)
                    {
                    foreach (OfficiumWebApp.Models.ResponseViewModel item in ViewBag.Data)
                    {
                    <tr>
                        <td>@item.ResponseText</td>
                        <td>@item.Username</td>
                        <td>@item.DateTimeOfUpdate</td>
                    </tr>
                    }
                    }
                </table>
            </div>
        </div>
    </div>
</div>

这里的 JavaScript 代码：

    <script type="text/javascript">
    $(document).ready(function(){    
        $('.collapse').on('shown.bs.collapse', function () {
            $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hidden.bs.collapse', function () {
            $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });
    });
</script>

我看不出我做错了什么？任何帮助都会很棒！

【问题讨论】：

标签： c# javascript asp.net asp.net-mvc twitter-bootstrap

【解决方案1】：

您的自定义 javascript 使用默认手风琴标记如预期工作，即

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                 <span class="glyphicon glyphicon-minus"></span>
              Collapsible Group Item #1
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                Anim pariatur cliche. Minim qui you in1.com probably haven't heard of them et cardigan trust fund culpa biodiesel.
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                 <span class="glyphicon glyphicon-plus"></span>
              Collapsible Group Item #2
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                Anim pariatur cliche...
            </div>
        </div>
    </div>
</div>

请在此处查看工作示例：

http://bootply.com/113766

您可能需要检查您的标记在呈现时是否与上述匹配，并且所有 javascript 资源文件正在加载。

【讨论】：

我不认为我的 JavaScript 正在加载，我不知道为什么？有没有办法检查资源文件是否正在加载？
在 chrome 中我使用开发工具，您可以检查网络选项卡中的 404 或查看资源部分。

【解决方案2】：

确保 jQuery 引用正在渲染，它 jQuery 事件没有触发。你可以在 jQuery 函数中使用 alert 来测试它，如果它触发意味着 jQuery 正在工作，如果没有，那么需要稍微调整它。

【讨论】：