我怎樣才能打開下mynavbar第二行，如果在導航欄

Question

點擊一個按鈕，我有這樣的代碼爲我mobilesite：

<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排導航欄：

的第一行用於顯示/隱藏導航欄的按鈕，第二行用導航欄顯示，只有當我點擊該按鈕時纔會顯示。

我的問題是我找不到任何類似jquerymobile中的導航欄顯示/隱藏按鈕。 所以我希望有人有另一種解決方案。

謝謝

Answer 1

查找到的jQuery .toggle功能，下面是一些代碼，香港專業教育學院拼湊起來，但沒有測試，它是所有使用jQuery的切換功能按鈕被點擊時顯示/隱藏的HTML元素用id = navbar。你必須定位按鈕與導航欄的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>