Accordion 元素在加载时默认打开

Question

我已将手风琴实现为一个常见问题列表，其中包含来自 ASP.NET WebApi 的数据。当页面加载时，手风琴显示数据时默认打开面板主体。这不是我复制它的默认行为。我检查了是否添加了 data-parent 属性，以确保在显示一个可折叠项时，指定父项下的所有可折叠元素都将关闭。

下面是我的手风琴的代码。请注意...我使用 angularjs 作为前端来使用 api

<div class="panel-body">

    <div dir-paginate="emp in Emps | filter:search | orderBy:key:AscOrDesc | itemsPerPage:5" class="wrapper center-block">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading{{emp.Id}}">
                    <div role="button"
                         data-toggle="collapse"
                         data-parent="#accordion"
                         href="#collapse{{emp.Id}}"
                         aria-expanded="true"
                         aria-controls="collapse{{emp.Id}}"
                         ng-click="GetFamilyByFuId(emp.Id);">
                        <h4 class="panel-title">
                            {{emp.FamilyUnitName}}
                        </h4>
                    </div>
                </div>
                <div id="collapse{{emp.Id}}" 
                     class="panel-collapse collapse in" 
                     role="tabpanel" 
                     aria-labelledby="heading{{emp.Id}}">
                    <div class="panel-body">
                        <div ng-repeat="f in Fam" class="col-md-12">
                            <div class="col-md-1">{{f.Id}}</div>
                            <div class="col-md-4">{{f.FirstName}}</div>
                            <div class="col-md-4">{{f.Surname}}</div>
                            <div class="col-md-1">{{f.RiskAreaId}}</div>
                            <div class="col-md-1">{{f.RoleId}}</div>
                            <div class="col-md-1">{{f.LocationId}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

这是页面上引用的相关 css 文件。

.wrapper{
  width:100%;
}
@media(max-width:992px){
 .wrapper{
  width:100%;
} 
}
.panel-heading {
  padding: 0;
    border:0;
}
.panel-title>a, .panel-title>a:active{
    display:block;
    padding:15px;
  color:#555;
  font-size:16px;
  font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
  word-spacing:3px;
    text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
.panel-heading.active a:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
} 

这是页面引用的js文件：

$('.panel-collapse').on('hide.bs.collapse', function () {
    $(this).siblings('.panel-heading').removeClass('active');
});

$('.panel-collapse').on('show.bs.collapse', function () {
    $(this).siblings('.panel-heading').addClass('active');
});

请注意，我在我的应用程序中使用 JQuery 版本 1.9.1 和 bootstrap 3。

Answer 1

1.9 版本的手风琴默认打开第一个元素。为了能够关闭所有这些，您需要添加此

$( ".selector" ).accordion({
  collapsible: true
});

这样你就可以一直关闭所有的部分。

告诉我这是否可以解决...如果没有，我会尽力帮助您！