如果单击导航栏中的按钮，如何在mynavbar下打开第二行

Question

我的移动网站有以下代码：

<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函数，下面是一些已被拼凑在一起但未经测试的代码，但所做的只是在单击按钮以显示/隐藏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>