Рассмотрим следующий фрагмент jQuery
кодаДобавление плюс/минус для начальной загрузки панели
function toggleIcon(e) {
$(e.target)
.prev('.panel-heading')
.find(".more-less")
.toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);
выше код находится внутри $(document).ready(function(){});
разметка выглядит следующим образом:
<div class="panel-group" id="collapse">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#collapse" data-toggle="collapse" href="#collapse-one"><i class="more-less glyphicon glyphicon-plus"></i> Item Details
<span class="badge pull-right" id="itemdetails">0</span></a></h4>
</div>
<div class="panel-collapse collapse in" id="collapse-one">
<div class="panel-body">
@for (int i = 0; i < Model.MyList.Count; i++) {
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse"
href="#@Model.MyList[i].Number"><i class="more-less glyphicon glyphicon-plus">@Model.MyList[i].Number, @Model.MyList[i].PropA, @Model.MyList[i].PropB</i></a></h4>
</div>
<div class="panel-collapse collapse" id="@Model.MyList[i].Number">
<div class="panel-body"></div>
</div>
</div>
</div>
</div>
}
</div>
</div>
Это работает для каждого панели, кроме первой. Первая панель всегда будет открытой и вместо добавления плюса добавит минус. Первая панель имеет класс panel-collapse collapse in
, который обеспечивает открытие панели при загрузке страницы.
Пожалуйста, обратите внимание, я вложенные панели, и это также хорошо работает для тех, кто тоже его только первая панель, которая вызывает у меня проблемы
Может кто-нибудь сказать мне, что я делаю неправильно, пожалуйста.
Опубликовать HTML-код слишком – ZimSystem
@ZimSystem Я обновил свой OP – Code