Скрытие дочерних элементов DIV во время локализации HTML

Question

У меня возникла проблема с моим кодом HTML и .js для веб-сайта, который я создаю.

В настоящее время я использую складные элементы DIV для «Contact List», который я создаю; как показано ниже.

 
 

<div> 
    <input type="text" class="live-search-box" placeholder="Search Here" /> 
    </div> 

<div > 
    <div role="main" class="ui-content"> 
     <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a"> 
      <h3>Category</h3> 
      <p>Defenition</p> 
      <div data-role="collapsible" data-theme="a" data-content-theme="a"> 
       <h3>Sub-category</h3> 
       <div data-role="collapsible" data-theme="a" data-content-theme="a"> 
        <h3>Location</h3> 
        <p>Point of Contact</p> 
       </div><!-- /section 1A --> 
      </div><!-- /section 1 --> 
     </div> 

     <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a"> 
      <h3>Category2</h3> 
      <p>Defenition2</p> 
      <div data-role="collapsible" data-theme="a" data-content-theme="a"> 
       <h3>Sub-Category</h3> 
       <div data-role="collapsible" data-theme="a" data-content-theme="a"> 
        <h3>Location</h3> 
        <p>Point of Contact2</p> 
       </div> 
      </div> 
     </div> 


    </div> 
</div> 

Проблема, которую я имею в моем .js коде. В настоящее время, когда я использую функцию поиска, он будет искать ключевое слово, но оно не будет развернуться и отобразить его. Единственное, что он покажет, это верхний или главный DIV, в котором содержится ключевое слово. Поэтому мне нужно развернуть DIV и попытаться выполнить поиск ключевого слова вручную.

Вы можете увидеть это в действии на этом JSFiddle: https://jsfiddle.net/dgaz8n5k/17/

То, что я пытаюсь сделать, чтобы получить мой код, чтобы развернуть вниз DIV-х и показывает только искомое ключевое слово. Что-то вроде this. Это был мой старый код, но я не мог его использовать, так как он нарушил мою функцию поиска.

Есть ли способ, я могу заставить его делать то же самое, но не нарушая функцию поиска?

И если вы спрашиваете, как это сломано. Если вы посмотрите на my old project, вы увидите, что после того, как вы очистите поиск или попытаетесь свернуть DIV, это не сработает.

В общем, мне нужно, чтобы он выполнял то же самое с функцией поиска, но при поиске выполнял поиск и разборку div во время поиска, точно так же, как my new project.

Спасибо!

Answer 1

Working fiddle.

Вы можете сделать это, добавив следующую строку:

$('.ui-icon-plus',this).click(); 

Только после того, как:

$(this).show(); 

Добавленная линия детализировать совпавшие дивы, нажав на + знак.

Надеюсь, это поможет.