JQUERY仅展开选定的父列表

Question

我从这个JSfiddle获取了来源。最初子列表元素是折叠的，单击父元素时只会展开选定的父列表。当我搜索某个名称时，它会准确显示，但在从搜索框中清除搜索文本后，它会扩展所有父母和孩子。

//Search    
$('input#catInput').keyup(function() {
  var searchTerms = $(this).val();
  console.log('Input change')
  $('#orgCat li').each(function() {
    var $li = $(this);
    var hasMatch = searchTerms.length == 0 || $li.text().toLowerCase().indexOf(searchTerms.toLowerCase()) > 0;

    $li.toggle(hasMatch);
    if ($li.is(':hidden')) {
      $li.closest("ul").show('slow');
    }
  });
});

var $expandBtns = $('.expandBtn');
//counting childs 
$expandBtns.each(function() {
  var $span = $(this).find('span#count');
  var $subList = $(this).siblings('ul').find('li')

  $span.text('  ' + $subList.length)
});

//Collapse and Expand

$('#orgCat ul').hide('li');
$expandBtns.on('click', function() {
  var $subList = $(this).siblings('ul');

  if ($subList.is(':visible')) {
    $subList.hide('slow');
  } else {
    $subList.show('slow');
  }
});

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

ul li {}

li>ul {
  padding-left: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="searchSection">
  <form novalidate="novalidate">
    <div class="form-group">
      <select class="form-control" id="catSelect" title="Search with category name.">
            <option id="1">Country </option>
            <option id="2">Dept</option>
          </select>
    </div>
    <div class="form-group CategorySearchBox">
      <input class="form-control" id="catInput" placeholder="Search here..." title="Search with category name." type="text">
    </div>
  </form>
  <ul id="orgCat">
    <li catparent-id="" catli-id="1">
      <div class="expandBtn"><span id="count" class="badge text-right">13</span> &nbsp; India</div>
      <ul style="display: none;">
        <li catparent-id="1" catli-id="66">
          <div class="expandBtn"><span id="count" class="badge text-right">3</span> &nbsp; Ap</div>
          <ul style="display: none;">
            <li catparent-id="66" catli-id="99">
              <div class="expandBtn"><span id="count" class="badge text-right">0</span> &nbsp; Venkat</div>
            </li>
            <li catparent-id="66" catli-id="7">
              <div class="expandBtn"><span id="count" class="badge text-right">0</span> &nbsp; vag</div>
            </li>
            <li catparent-id="66" catli-id="8">
              <div class="expandBtn"><span id="count" class="badge text-right">0</span> &nbsp; tirupati</div>
            </li>
          </ul>
        </li>
        <li catparent-id="1" catli-id="3">
          <div class="expandBtn"><span id="count" class="badge text-right">5</span> &nbsp; TN</div>
          <ul style="display: none;">
            <li catparent-id="3" catli-id="9">
              <div class="expandBtn"><span id="count" class="badge text-right">0</span> &nbsp; chena</div>
            </li>
            <li catparent-id="3" catli-id="10">
              <div class="expandBtn"><span id="count" class="badge text-right">0</span> &nbsp; India1</div>
            </li>
            <li catparent-id="3" catli-id="11">
              <div class="expandBtn"><span id="count" class="badge text-right">0</span> &nbsp; India2</div>
            </li>
            <li catparent-id="3" catli-id="12">
              <div class="expandBtn"><span id="count" class="badge text-right">0</span> &nbsp; India3</div>
            </li>
            <li catparent-id="3" catli-id="13">
              <div class="expandBtn"><span id="count" class="badge text-right">0</span> &nbsp; India4</div>
            </li>
          </ul>
        </li>
        <li catparent-id="1" catli-id="4">
          <div class="expandBtn"><span id="count" class="badge text-right">2</span> &nbsp; TS</div>
          <ul style="display: none;">
            <li catparent-id="4" catli-id="5">
              <div class="expandBtn"><span id="count" class="badge text-right">0</span> &nbsp; Hyd</div>
            </li>
            <li catparent-id="4" catli-id="6">
              <div class="expandBtn"><span id="count" class="badge text-right">0</span> &nbsp; warangal</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li catparent-id="0" catli-id="14">
      <div class="expandBtn"><span id="count" class="badge text-right">2</span> &nbsp; USA</div>
      <ul style="display: none;">
        <li catparent-id="14" catli-id="15">
          <div class="expandBtn"><span id="count" class="badge text-right">0</span> &nbsp; USA-1</div>
        </li>
        <li catparent-id="14" catli-id="16">
          <div class="expandBtn"><span id="count" class="badge text-right">0</span> &nbsp; USA-2</div>
        </li>
      </ul>
    </li>
  </ul>
</div>

需要扩大崩溃的解决方案。

Answer 1

请检查更新的jsfiddle https://jsfiddle.net/vt0tw50e/24/

if(searchTerms == "") {
    $expandBtns.each(function() {
        var $subList = $(this).siblings('ul');
        $subList.hide('slow');
    });
 }