0

Jquery Mobile でタブ付きの折りたたみ可能なセットを使用するにはどうすればよいですか?

ページの左側に、メニューとして機能する折りたたみ可能なセットが必要です。子を持つアイテムと持たないアイテムがあります。子のないアイテムはタブを直接変更したいのですが、子のあるアイテムは展開する必要があります。（この場合、子供たちはタブを変更します）

に例があります

-- dummy text to get jsfiddle link to submit ?
http://jsfiddle.net/7jg43uLg/3/

タブを変更したり展開したりしない子がいないと、ヘッダー項目を取得できません。タブの内容もデフォルトで表示されます。

私が望む結果を達成するためのより良い方法はありますか?

助けてくれてありがとう

4

2 に答える 2

0

エザンカーの答えはほとんどそこにありました。ただし、サブリストをタブで動作させることができませんでした。

最後に、タブなしで独自のソリューションを展開しました。

  -- Demo
  http://jsfiddle.net/nbqtxufw/5/
于 2014-11-13T23:24:24.693 に答える
0

子のない項目は通常のリスト項目であり、子のある項目はリスト項目内で折りたたみ可能なリストビューとしてメニューを作成できます。

<ul data-role="listview" id="menu">
    <li><a href="#">Location</a></li>
    <li><a href="#">Product</a></li>
    <li>
        <div data-role="collapsible">
            <h4>Community Facilities</h4>
            <p>
         <ul data-role="listview" data-inset="false">
            <li><a data-transition="pop" href="#cat">Cat</a></li>
            <li><a data-transition="pop" href="#dog">Dog</a></li>
        </ul>
            </p>
        </div>                                
    </li>       
</ul>

次に、デフォルトの CSS の一部をオーバーライドして、余分なパディングとマージンを取り除くことができます。

#menu >.ui-li-static {
    padding: 0 !important;
    border: 0;
}
#menu .ui-li-static .ui-collapsible {
    margin: 0 !important;
    border-radius: 0;
    border: 0 !important;
}
#menu .ui-li-static .ui-collapsible-heading {
    margin: 0 !important;
}
#menu .ui-li-static .ui-collapsible-content {
    padding-top: 0;
    padding-bottom: 0;
}

デモ

于 2014-11-13T18:51:01.147 に答える