Аккордеонный элемент открывается по умолчанию при загрузке - PullRequest
Новая
       8

Аккордеонный элемент открывается по умолчанию при загрузке

0 голосов
/ 04 июля 2018

У меня реализован аккордеон в виде списка часто задаваемых вопросов с данными, полученными из 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 и начальной загрузки 3 в моем приложении.

1 Ответ

0 голосов
/ 04 июля 2018

Аккордеон в версии 1.9 по умолчанию открывает первый элемент. Чтобы иметь возможность закрыть все из них, вам нужно добавить это 

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

При этом вы сможете закрывать все разделы все время.

Скажи мне, если это исправлено ... если нет, я постараюсь тебе помочь!

...