0

モバイルサイト用に次のコードがあります。

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

    <div data-role="header">
        <h1>home</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>some text</p>


    </div><!-- /content -->

<div data-role="footer" data-position="fixed"> 
    <div data-role="navbar"> 
        <ul>  
        <li><a href="#home" data-iconpos="right" data-icon="star" data-transition="slide">home</a></li> 
        <li><a href="#contact" data-iconpos="right" data-icon="info" data-transition="slide">contact</a></li> 

        </ul> 
    </div> 
</div> 

</div><!-- /page home -->

そして今、私は2行のナビゲーションバーが欲しいです:

ナビゲーションバーを表示/非表示にするボタンのある最初の行と、そのボタンをクリックした場合にのみ表示されるナビゲーションバーのある2番目の行。

私の問題は、jquerymobile でそのナビゲーション バーの表示/非表示ボタンのようなものが見つからないことです。だから私は誰かが他の解決策を持っていることを願っています.

ありがとうございました

4

1 に答える 1

0

jquery .toggle 関数を調べてください。以下はいくつかのコードを組み合わせたものですが、テストされていません。ボタンをクリックして id=navbar の html 要素を表示/非表示にするときに jquery トグル関数を使用するだけです。CSSでボタンとナビゲーションバーを自分で配置する必要があります...

<a id="showHideNav" onclick="$.("#navbar").toggle();" data-role="button">Show/Hide Nav</a>

    <div id="navbar" data-role="navbar"> 
        <ul>  
        <li><a href="#home" data-iconpos="right" data-icon="star" data-transition="slide">home</a></li> 
        <li><a href="#contact" data-iconpos="right" data-icon="info" data-transition="slide">contact</a></li> 

        </ul> 
    </div> 
</div>
于 2012-11-13T09:25:47.813 に答える