jQuery Mobile可折叠菜单

Question

我正在尝试创建一个控制下方两个可折叠部分的显示/隐藏的导航栏。

这可以用jQuery Mobile吗？

<div data-role="navbar">
    <ul>
        <li><a data-theme="c" href="#">Menu</a></li>
        <li><a href="#">Search</a></li>
    </ul>
</div>

<div data-role="collapsible">
    <div data-role="navbar" class="menu">
        <ul>
            <li><a data-theme="c" href="#">Menu</a></li>
            <li><a href="#">Search</a></li>
        </ul>
    </div>
</div>

<div data-role="collapsible">
    <form class="search">
        <label for="search-mini">Search Input:</label>
        <input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
    </form>
</div>

例如，请查看移动设备上m.nbcolympics.com网站上的菜单。我想在他们的网站上创建一个菜单/搜索。

Answer 1

这应该足以让你开始并朝着大方向前进。

http://jsfiddle.net/japaneselanguagefriend/Mf4X2/

另请查看本指南：

http://jquerymobile.com/test/docs/content/content-collapsible.html