隐藏工具栏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 。

另一种可能是使用数据位=“固定”和数据全屏=“真”，其中将隐藏库提供 /显示您的导航栏页面时的底部点击/触摸屏幕上的某个地方。

这是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。