Question

我正在尝试在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>

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

Answer 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资源文件。

Answer 2

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

ASP.NET MVC 5 Bootstrap手风琴无法正常工作

2 个答案: