Question

我已将手风琴实现为FAQ列表，并使用了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
});

通过此操作，您将能够始终关闭所有部分。

如果此问题已解决，请告诉我...如果没有，我会尽力帮助您！

默认情况下，手风琴元素在加载后会打开

1 个答案: