Javascript JQUERY仅展开所选父列表

Javascript JQUERY仅展开所选父列表,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我从这里得到了消息来源。最初,子列表元素是折叠的,单击父元素仅展开选定的父列表即可。当我搜索某个名字时,它会准确地显示出来,但在清除搜索框中的搜索文本后,它会扩展所有的父母和孩子 //搜索 $('input#catInput').keyup(function(){ var searchTerms=$(this.val(); console.log('输入更改') $('#orgCat li')。每个(函数(){ var$li=$(本); var hasMatch=searchTerms.len

我从这里得到了消息来源。最初,子列表元素是折叠的,单击父元素仅展开选定的父列表即可。当我搜索某个名字时,它会准确地显示出来,但在清除搜索框中的搜索文本后,它会扩展所有的父母和孩子

//搜索
$('input#catInput').keyup(function(){
var searchTerms=$(this.val();
console.log('输入更改')
$('#orgCat li')。每个(函数(){
var$li=$(本);
var hasMatch=searchTerms.length==0 | |$li.text().toLowerCase().indexOf(searchTerms.toLowerCase())>0;
$li.toggle(hasMatch);
如果($li.is(':hidden')){
$li.最近的(“ul”).显示(“慢”);
}
});
});
变量$expandBtns=$('.expandBtn');
//数孩子
$expandBtns.each(函数(){
var$span=$(this).find('span#count');
var$subList=$(this.sibbines('ul')。find('li'))
$span.text(“”+$subList.length)
});
//崩胀
$('orgCat ul')。隐藏('li');
$expandBtns.on('click',function(){
var$subList=$(this.sillides('ul');
如果($subList.is(':visible')){
$subList.hide('slow');
}否则{
$subList.show('slow');
}
});
ul{
列表样式:无;
边际:0px;
填充:0px;
}
ul li{}
li>ul{
左侧填充:15px;
}

国家
部
  • 13印度
    • 3美联社
      • 0文卡特
      • 0阴道
      • 0蒂鲁帕蒂
    • 5 TN
      • 0切纳
      • 0印度1
      • 0印度2
      • 0印度3
      • 0印度4
    • 2 TS
      • 0液压
      • 0瓦兰加尔
  • 2美国
    • 0美国-1
    • 0美国-2

请检查更新的JSFIDLE


完成了,谢谢你,Shiladitya。正常扩展还有一个问题。如果展开列表,则上一个展开的列表不会折叠:(你能帮我添加字体很棒的图标“+”和“-”来折叠和展开吗。JSFIDLE完成了,谢谢你,以及如何更改专利的字体颜色。fa{color:red;}作为回答,你没有为3级节点编写span标记。这里是我完整的添加展开折叠。
if(searchTerms == "") {
    $expandBtns.each(function() {
        var $subList = $(this).siblings('ul');
        $subList.hide('slow');
    });
 }