jquery mobile：複数のデータフィルタ表示

Question

特定のリスト項目を展開して子項目を表示する機能を持つjquery-mobileでリストビューコントロールを作成しようとしています。私の目標は、このリストはフィルタリング可能であり、jquery-mobile data-filter = "true"属性で十分です。残念ながら、内部には<と> <という要素が継承されているように見え、複数のフィルタコントロールが使用されています。 jqueryでこの種の継承を防ぐためのベストプラクティスはありますか？無関係なフォームタグを削除するためにjqueryを使用することは効果的なハックですが、私はむしろそれを設計通りにやります。

<div data-role="content"> 
    <div class="choice_list"> 
    <h2>Select an item</h2><br /> 
    <ul data-role="listview" data-inset="true" data-filter="true"> 
     <li><a>Item</a></li> 
     <li data-role="collapsible"> 
     <h3>Super Item</h3> 
     <ul data-role="listview" data-inset="true"> 
      <li><a>Sub Item</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 

は、例えば、このJSFiddleを見てみてください：http://jsfiddle.net/harlomic/SsJjS/3/を

は、ここで簡単な例です。

Answer 1

次の3つのフィルタ入力のうちの2つを隠すためにCSSを使用することができます。http://jsfiddle.net/SsJjS/5/

注testは、リストビューがされているページのIDであること：ここでは

/*hide all of the search filter forms*/ 
#test .choice_list form.ui-listview-filter { 
    display : none; 
} 

/*show just the first search filter form*/ 
#test .choice_list form.ui-listview-filter:nth-child(-n+3) { 
    display : block; 
} 

はデモです見つかったとchoice_listはあなたのリストビューのコンテナ要素のクラスです。

Answer 2

JQMのネストされたリストでも同じ問題が発生しました。

私はそれを使いこなしましたが、< ul>からdata-role = "listview"を削除しても問題は解決しますが、あなたのJQMスタイリングは失われてしまいます。探している。私たちは皆、JQMの滑らかなレイアウトとスタイリングを求めています。

JQMはこの問題を修正する必要があります。これについてはドキュメントで何も見つかりませんでしたので、これはバグかもしれません。