仅当搜索手风琴时同一面板组中有命中时显示面板

Question

我正在构建一个手风琴，可以在键控更改时搜索点击显示的位置。到目前为止，这运行良好，除了我使用面板来显示类别，并且我不希望在同一段中仍有点击时

面板消失。这是到目前为止我在JS中拥有的，这要归功于codepen：

(function(){
var searchTerm, panelContainerId;
// Create a new contains that is case insensitive
$.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(); 
});
});
}());

#accordion_search_bar_container {
position: relative;
}
#accordion_search_bar_container:after {
content: 'e003';
font-family: 'Glyphicons Halflings';
width: 18px;
height: 18px;
position: absolute;
right: 10px;
bottom: 10px;
}
#accordion_search_bar_container #accordion_search_bar {
display: block;
margin: 10px auto;
width: 100%;
padding: 7px 10px;
border: 1px solid #cacaca;
border-radius: 25px;
outline: 0;
}
.panel-title a {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section50" class="container-fluid">
<div class="container-fluid">
<div id="accordion_search_bar_container">
<input id="accordion_search_bar" placeholder="Zoeken..." type="search"> </div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-info" id="collapse1_container">
<div class="panel-body" style="text-align: center;" id="category"> <b>**Category**</b></div>
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title"> <a role="button" data-toggle="collapse"
data-parent="#accordion" href="#collapse1" aria-expanded="true"
aria-controls="collapse1">Question</a> </h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<p>Answer1</p>
</div>
</div>
</div>
<div class="panel panel-info" id="collapse2_Container">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordion" href="#collapse2" aria-expanded="false"
aria-controls="collapse2">Question</a> </h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<p>Answer2</p>
</div>
</div>
</div>
<div class="panel panel-info" id="collapse3_Container">
<div class="panel-heading" role="tab" id="heading3">
<h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordion" href="#collapse3" aria-expanded="false"
aria-controls="collapse3">Question</a> </h4>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
<p>Answer3</p>
</div>
</div>
</div>
<div class="panel panel-info" id="collapse4_Container">
<div class="panel-heading" role="tab" id="heading4">
<h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse"
data-parent="#accordion" href="#collapse4" aria-expanded="false"
aria-controls="collapse4">Question</a> </h4>
</div>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
<div class="panel-body">
<p>Answer4</p>
</div>
</div>
</div>
</div>

简而言之：我如何使我放置"类别"的面板(id="category"(只要在同一部分中有点击就不会消失？我似乎无法让它工作。

提前感谢！

Answer 1

(function() {
var searchTerm, panelContainerId;
// Create a new contains that is case insensitive
$.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();
var totalShown = 0;
$('#accordion > .panel').each(function() {
panelContainerId = '#' + $(this).attr('id');
$(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
$(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show();
if ($(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').length) {
totalShown++;
}
});
if (!totalShown) {
$('#category').hide();
} else {
$('#category').show();
}
});
}());

#accordion_search_bar_container {
position: relative;
}
#accordion_search_bar_container:after {
content: 'e003';
font-family: 'Glyphicons Halflings';
width: 18px;
height: 18px;
position: absolute;
right: 10px;
bottom: 10px;
}
#accordion_search_bar_container #accordion_search_bar {
display: block;
margin: 10px auto;
width: 100%;
padding: 7px 10px;
border: 1px solid #cacaca;
border-radius: 25px;
outline: 0;
}
.panel-title a {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="section50" class="container-fluid">
<div class="container-fluid">
<div id="accordion_search_bar_container">
<input id="accordion_search_bar" placeholder="Zoeken..." type="search"> </div>
<div style="text-align: center;" id="category"> <b>**Category**</b></div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-info" id="collapse1_container">
<div class="panel-body"></div>
<div class="panel-heading" role="tab" id="heading1">
<h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">Question</a> </h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<p>Answer1</p>
</div>
</div>
</div>
<div class="panel panel-info" id="collapse2_Container">
<div class="panel-heading" role="tab" id="heading2">
<h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">Question</a> </h4>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
<p>Answer2</p>
</div>
</div>
</div>
<div class="panel panel-info" id="collapse3_Container">
<div class="panel-heading" role="tab" id="heading3">
<h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">Question</a> </h4>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
<p>Answer3</p>
</div>
</div>
</div>
<div class="panel panel-info" id="collapse4_Container">
<div class="panel-heading" role="tab" id="heading4">
<h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4">Question</a> </h4>
</div>
<div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
<div class="panel-body">
<p>Answer4</p>
</div>
</div>
</div>
</div>