jquery - 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