我有一个搜索功能,当搜索查询匹配时,它只显示折叠面板的特定面板。请参见fiddle。折叠面板是展开的(class=“in”),当某事匹配时。一旦搜索字段被清除,我希望 accordion 回到折叠状态。为此,我尝试删除添加的class=“in”,但似乎它没有刷新,等场地清理完毕,有什么想法吗
var $infoPanels = $('.panel-info'),
cachedText = [];
$infoPanels.each(function (i, v) {
cachedText[i] = $(this).text().toLowerCase();
});
$('#search-criteria').on('keyup', function () {
var g = $(this).val().toLowerCase();
if (g !== ""){
$infoPanels.parentsUntil('.accordion').hide().removeClass("in");
}
$.each(cachedText, function (i, v) {
if (g.length > 0 && v.indexOf(g) !== -1) {
$infoPanels.eq(i).show().parentsUntil('.accordion').addClass("in").show();
}
});
});
更新:我通过添加一个else if使其工作,请参见Fiddle。
2条答案
按热度按时间puruo6ea1#
该代码检查
search-criteria
是否有值,然后删除该类。相反,它应该检查g == ""
是否有值,然后删除该类。还要向该条件添加一个else
子句,以便在g == ""
时不添加in
类。工作示例:http://jsfiddle.net/bsXGp/2/
cgyqldqp2#
尝试
演示:Fiddle或Fiddle