隐藏工具栏Jquery Mobile

Question

使用jquery mobile隐藏工具栏的方法有哪些。理想情况下，当没有焦点时，我想隐藏工具栏上方的工具栏。我开始使用基本布局

    <div data-role="navbar">
<ul>
    <li><a href="a.html">Settings</a></li>
    <li><a href="b.html">Whatever</a></li>
</ul>

http://jsfiddle.net/DMUwp/

Answer 1

当您点击标题时，一种解决方案可能是隐藏导航栏：

    $("div[data-role=header]").on("click", function () {
        $("div[data-role=navbar]").slideToggle(200);
    });

    $("div[data-role=navbar]").on("click", function (e) {
        e.stopPropagation();
    });

这是 DEMO 。

另一个可能是使用库提供的 data-position =“fixed”和 data-fullscreen =“true”来隐藏/显示您的<点击/触摸屏幕上某处的页面底部的strong> navbar 。

这是 DEMO 。

---

修改

对于第一个，在加载页面时可能会出现一些问题，因此要避免此问题，您可以从标题中取出导航栏并将其置于其上方这样：

    <div data-role="navbar">
        <ul>
            <li><a href="a.html">Settings</a>

            </li>
            <li><a href="b.html">Whatever</a>

            </li>
        </ul>
    </div>
    <div data-role="header">
         <h1>Hide the Toolbar</h1>
    </div>

然后添加这个js代码：

    $("div[data-role=header]").on("click", function () {
        $("div[data-role=navbar]").slideToggle(200);
    });

这是 DEMO 。