jquery - 隐藏工具栏 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();
    });

这是一个演示。

另一种可能是使用库提供的data-position="fixed"和data-fullscreen="true"，当单击/触摸屏幕上的某个位置时，它们将在页面底部隐藏/显示您的导航栏。

这是一个演示。

---

编辑

对于第一个，在加载页面时可能会出现一些问题，因此为避免此问题，您可以从标题中取出导航栏并将其放在上面，如下所示：

    <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);
    });

这是一个演示。