隱藏工具欄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。