私はHTMLと私は建物だウェブサイトのための.jsコードでいくつかの問題を抱えているHTMLさがす

Question

中にDIV子要素を非表示にします。

現在、私は私が構築しています「連絡先リスト」のための折りたたみ可能なDIV要素を使用しています。以下に示すように。

 
 

<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と折りたたみ可能なdivがあります。my new projectのようになります。

ありがとうございます！

Answer 1

Working fiddle。

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

直後：

あなたは、以下の行を追加することでこれを行うことが

$(this).show(); 

追加された行は+記号をクリックしてマッチしたdivをドリルダウンします。

これが役に立ちます。