【发布时间】：2018-06-25 04:47:20
【问题描述】：
我有我的 HTML，它是一个包含几个面板的手风琴。我已经包含一个搜索框来搜索特定的面板。我能够搜索并找到结果。我很难展示崩溃的结果。最初，所有面板都处于折叠状态，搜索结果后，它应该处于（折叠状态）- 不仅显示面板标题，还显示完整内容。
我的 HTML：-
<div class="container"
id="page_container">
<div id="accordion_search_bar_container">
<input type="search"
id="accordion_search_bar"
placeholder="Search"/>
</div>
<div class="panel-group"
id="accordion"
role="tablist"
aria-multiselectable="true">
<div class="panel panel-success"
id="collapseOne_container">
<div class="panel-heading"
role="tab"
id="headingOne">
<h4 class="panel-title">
<a role="button"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne">
One
</a>
</h4>
</div>
<div id="collapseOne"
class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="headingOne">
<div class="panel-body">
<p>Pellentesque convallis dolor</p>
<p>Enim at tincidunt magna dapibus vitae</p>
</div>
</div>
</div>
<div class="panel panel-primary"
id="collapseTwo_Container">
<div class="panel-heading"
role="tab"
id="headingTwo">
<h4 class="panel-title">
<a class="collapsed"
role="button"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo">
Two
</a>
</h4>
</div>
<div id="collapseTwo"
class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="headingTwo">
<div class="panel-body">
<p>Vestibulum in laoreet nisi</p>
<p>Sit amet placerat massa</p>
</div>
</div>
</div>
<div class="panel panel-danger"
id="collapseThree_Container">
<div class="panel-heading"
role="tab"
id="headingThree">
<h4 class="panel-title">
<a class="collapsed"
role="button"
data-toggle="collapse"
data-parent="#accordion"
href="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree">
Three
</a>
</h4>
</div>
<div id="collapseThree"
class="panel-collapse collapse"
role="tabpanel"
aria-labelledby="headingThree">
<div class="panel-body">
<p>Curabitur sem eros tempor sit</p>
<p>Amet nunc eget, gravida mollis</p>
</div>
</div>
</div>
</div>
</div>
我的 jQuery 搜索是
(function(){
var searchTerm, panelContainerId;
$.expr[':'].containsCaseInsensitive = function (n, i, m) {
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >=
0;
};
$('#accordion_search_bar').on('change keyup paste click', function () {
searchTerm = $(this).val();
$('#accordion > .panel').each(function () {
panelContainerId = '#' + $(this).attr('id');
$(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm +
'))').hide();
$(panelContainerId + ':containsCaseInsensitive(' + searchTerm +
')').show();
});
});
}());
有了搜索结果，我应该给出折叠面板视图。
显示（）。崩溃;
有人可以帮我解决这个问题吗？
【问题讨论】：
-
你用bootstrap还是什么的？
-
请也发布您的 CSS。 runnable 代码将是最好的。
-
这是我的 CSS #accordion_search_bar_container { position: relative; &:after { 内容: '\e003'; font-family：字形半身人；宽度：18px；高度：18px；位置：绝对；右：10px；底部：10px； } #accordion_search_bar { 显示：块；边距：10px 自动；宽度：100%；填充：7px 10px；边框：1px 实心 $grey;边框半径：25px；大纲：0； } .panel-title { 一个 { 显示：块； }
标签： javascript jquery html css jquery-ui