JQuery Mobileでセカンダリdivクラスの中に折りたたみ可能なコンテンツを置くことは可能ですか？

Question

私はjQueryのモバイルを使用してiPadアプリを作成していて、<div class="content-secondary">を使用してナビゲーションバーを作成したいと思います、そしてそれは私が二内部でシンプル<li>ベースのナビゲーションを作成することができます現状ではそのナビゲーションバーの内側に拡張可能コンテンツ

を持っていますdivを使用していますが、展開可能なコンテンツを追加しようとすると、予期したとおりにレンダリングされません。 （Fiddle Link）を示すためにJSFiddleを作成しようとしましたが、JSFiddleはセカンダリのナビゲーションペインをサポートしていないようです。幅を広げて連続ページコンテンツとしてレンダリングしても意味がありません。

上記のフィドルリンクをクリックすると、メインコンテンツの下部にナビゲーションバーが表示されます。折りたたみ可能なコンテンツはうまくレンダリングされます。しかし、同じコードを使ってJQuery Mobile Webページを作成すると、問題が表示されます。

ハイライト表示するために、以下の画面グラブがあります。画面が狭い場合

- ナビゲーションバーは、本体後、次は、崩壊が問題なく動作

画面を広くすると、ナビゲーションバーがアクティブになりますが、折りたたみ可能なコンテンツがリスト

何かアドバイスやのように振る舞います思考？これは既知の問題または設計機能ですか？

おかげ

Answer 1

デモドキュメントのCSSを使用してプライマリセカンダリビューを作成し、2つのコンテンツブロックの動作を定義するファイルがあるとします（jquery.mobile-1.1には「content-secondary」はありません） .0.css）。あなたは、このようなメディアクエリでビットを見つける：

/* fix up the collapsibles - expanded on desktop */ 
.content-secondary .ui-collapsible-heading { 
    display: none; 
} 
.content-secondary .ui-collapsible-contain { 
    margin:0; 
} 
.content-secondary .ui-collapsible-content { 
    display: block; 
    margin: 0; 
    padding: 0; 
} 

このセクションでは、ヘッダー（それを崩壊からあなたを防ぐことを）隠し、折りたたみ可能なコンテンツを展開します。

メディアセグメントの前にこのセクションを含めることで、通常の「折りたたみ」動作を上書きし、常に開くようにします。同様に、メディアセグメントからメディアセグメントを取り除くと、すべての幅/方向で強制的に再び折り畳まれます。

「見出し」を有効にする必要があります（デフォルトでは非表示になっていて、その子が非表示の場合は何もクリックして表示できません）。これを行うには、セグメントを削除します。後続のすべてのメディアからの問い合わせAssidiousBlueへ

Answer 2

リストビューは、すべての周り-15pxマージンを行います。私はどちらかを示唆してJQMの後に配置され、独自のスタイルシートで、このCSSをオーバーライドして、このスニペットを使用します。

.ui-content .ui-listview{margin:-15px -15px 0 -15px;}​ 

またはそれはそうのような-15px余裕使用していないので、インセットリストを使用します。

<ul data-role="listview" data-theme="c" data-dividertheme="d" data-inset="true"> 
    <li><a href="#Link1">Link1</a></li> 
    <li><a href="#Link2">Link2</a></li> 
    <li><a href="#Link3">Link3</a></li> 
</ul> 

を

私はそれが助けてくれることを願っています。この回答を改善できる方法があるかどうかを教えてください。

Answer 3

多くの感謝から

.content-secondary .ui-collapsible-heading { 
    display: none; 
} 

。 は同じ問題を抱えていたし、全体のセクションをコメントアウトすることによってそれを修正：

.content-secondary .ui-collapsible-heading { 
    display: none; 
} 
.content-secondary .ui-collapsible-contain { 
    margin:0; 
} 
.content-secondary .ui-collapsible-content { 
    display: block; 
    margin: 0; 
    padding: 0; 
} 

乾杯、 Alexx