jquery.mobile折りたたみ可能な親と子フィルタで拡大

Question

私はjquery.mobileライブラリから使用している子折りたたみコンテンツ&親のcodepenの例を作成しました。 私はフィルタリングの面で必要なように動作します。 そして、最初は内容が崩壊した状態で読み込まれます。

ただし、フィルタ検索が適用されるため、コンテンツは展開されません。 結果はフィルタリングされますが、手動で[クリック]して展開して結果を確認する必要がありますが、これは理想的ではありません。特に、結果が複数の折りたたみ可能なコンテンツセクションから返される場合があります。ここで

は、サンプルコードのデモです： http://codepen.io/anon/pen/LRqBaa

そして、ここではその一例からhtmlです：

<div data-role="page" id="myfilter"> 

I would like the relevent below collapsed contents to expand when the filter is used. 
For example, filtering for 'liz' would show just the 'Animals' collapsible be expanded with just the one result under it - Lizard 

<h2>Collapsible set with search</h2> 
<form> 
<input data-type="search" id="searchForCollapsibleSetChildren"> 
</form> 
<div data-role="collapsible-set" data-filter="true" data-children="> div, > div div ul li" data-inset="true" id="collapsiblesetForFilterChildren" data-input="#searchForCollapsibleSetChildren"> 
    <div data-role="collapsible" data-filtertext="Animals Cats Dogs Lizards snakes"> 
     <h3>Animals</h3> 
     <ul data-role="listview" data-inset="false"> 
      <li data-filtertext="Animals Cats">Cats</li> 
      <li data-filtertext="Animals Dogs">Dogs</li> 
      <li data-filtertext="Animals Lizards">Lizards</li> 
      <li data-filtertext="Animals Snakes">Snakes</li> 
     </ul> 
    </div> 
    <div data-role="collapsible" data-filtertext="Cars Acura Audi BMW Cadillac"> 
     <h3>Cars</h3> 
     <ul data-role="listview" data-inset="false"> 
      <li data-filtertext="Cars Acura">Acura</li> 
      <li data-filtertext="Cars Audi">Audi</li> 
      <li data-filtertext="Cars BMW">BMW</li> 
      <li data-filtertext="Cars Cadillac">Cadillac</li> 
     </ul> 
    </div> 
    <div data-role="collapsible" data-filtertext="Planets Earth Jupiter Mars Mercury"> 
     <h3>Planets</h3> 
     <ul data-role="listview" data-inset="false"> 
      <li data-filtertext="Planets Acura">Earth</li> 
      <li data-filtertext="Planets Jupiter">Jupiter</li> 
      <li data-filtertext="Planets Mars">Mars</li> 
      <li data-filtertext="Planets Mercury">Mercury</li> 
     </ul> 
    </div> 
</div> 

私は感謝するだろう専門家のアドバイスe、これを達成する方法が不明で、ライブラリのサンプルページ内に何も見つかりませんでした。

EDIT ありがとう：

は、私はちょうど私が作成していない別のjsfiddleを見つけましたが、私が必要とするものはほとんどありき。あなたがフィルターに結果が見つかったとして、それは実際に私が欲しいものである、セクションを拡張しないことに気づくでしょう、そこ https://jsfiddle.net/j5krxota/1/

： この例を参照してください。 場合、私は、しかし、それを好む：

• は、フィルタがクリアされたときに「CA」のフィルタならば、それは「猫の結果をキャッチ...最初の折り畳み式[動物]を展開し、しかしないをしましたフィルターをクリアすると、「animals」セクションが拡大したままになります。フィルターがクリアされたらもう一度閉じてください。

• フィルタによっては、何かが正しくないように見えることがあります。たとえば、filter 'ju'は 'planet'展開可能セクションから結果 'jupiter'を返します。どちらが正しい。 'ca'をフィルタリングすると 'cars'セクションの 'cadillac'の結果は返されますが、 'cars'セクションは展開されません。 'cats'の検出のために 'animals' 。

ここにいくつかのことを尋ねるための謝罪が、それはそのようにフィルタなぜそれが私を超えだ、他は[車]ないしながら、一つのセクションは結果[惑星]を展開するようです。なぜ私は考えていないのですが、jsでこれをどのように修正するのか手がかりにはなりません。 おかげで再び！

Answer 1

あなたの条件を達成するために、スクリプトの下に申請してください：

$(document).on("pagecreate", "#myfilter", function(){ 
    $("#collapsiblesetForFilterChildren").on("filterablefilter", function(event, ui) { 
     ui.items.each(function(index) { 
       $(this).collapsible("option", "collapsed", $(this).hasClass("ui-screen-hidden")).removeClass("ui-screen-hidden"); 

     }); 
    }); 
}); 

注：私は同様にあなたのHTML構造のいくつかの変更を行った上でJSを適用します。

作業のデモを通過してください：http://jsfiddle.net/2Snbq/29/