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>

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

1 个答案: