2012-05-12 4 views
0

jQuery Mobileのネストされたリストでは、サブリストがあるときに通常のテキストが消えます。ここでは例のコードは次のとおりです。jQuery Mobileネストされたリスト - 通常の強調テキストが隠されています

<div data-role="page"> 
<ul data-role="listview"> 
    <li> 
      <h1>Header Text 1</h1> 
     Normal Text 1 
     <p>Sub Text 1</p> 
    </li> 
    <li> 
     <h1>Header Text 2</h1> 
     Normal Text 2 
     <p>Sub Text 2</p> 
     <ul>   
      <li><p>Sub item 1</p></li> 
      <li><p>Sub item 2</p></li> 
     </ul> 
    </li> 
    <li> 
     <h1>Header Text 3</h1> 
     Normal Text 3 
     <p>Sub Text 3</p> 
    </li> 
</ul> 
</div> 

テキストNormal Text 2は、ネストされたリストには表示されません。ここで

はスクリーンショットです:http://jsfiddle.net/stani/2WwGC/
UPDATE: - 今、正しいはずフィドルが正しくありませんでした Notice the missing text in item #2

私も一緒に問題を示しjsfiddleを入れています。

「通常のテキスト2」の表示方法はありますか?それとも、jQuery Mobileフレームワークのバグでしょうか?

+0

スパンタグとラベルタグで試してみましたが、これらのタグは両方とも「ノーマルテキスト2」の強調度を上げていますが、上の例の「ノーマルテキスト1」と「ノーマルテキスト3」では正しく機能しています。 – Steve

答えて

1

jQueryUIは元のリストから特定のHTMLタグを抽出し、その意味的な意味(<h1>がタイトルになるなど)に基づいてより美しい方法で書き直すようです。 「孤立したテキスト」は適切に処理されないようです。

いずれにしても、私は<p/>または<div/>にあなたの「通常のテキスト」をラップしない理由はありません。

+0

一般的に私はあなたが正しいと思います。しかし、ドキュメントからは、ラッパーを使用しないことは、リストビューに「通常の」テキストを入れる有効な方法であることを暗示しているようです。 「テキストの階層を追加するには、見出しを使用してフォントの強調と使用を増やしてください強調するために段落 " – Steve

+0

しかし、彼は良い点を持っていた。なぜあなたのテキストをpタグにラップしないのですか? – codaniel

+0

簡潔に言えば、段落またはdiv(またはスパン、またはラベル)タグを使用すると機能しません。テキストは、タグ(またはタグなし)に基づいて異なるスタイルになります。ドキュメントによれば、適用されるスタイル(上記の例で示されている)は以下の通りです:header tags =フォント強調、段落タグ=強調強調、タグ=通常強調テキストなし。私が達成しようとしているのは、強調または強く強調するのではなく、通常の強調です。したがって、段落またはヘッダー(またはdivなど)タグを使用することはできません。 – Steve

関連する問題