2014-02-17 59 views
0

我需要在網站的amobile版本上工作,並需要設計支持Submenus的導航菜單。我做了一些事情,但沒有做到這一點如何將它轉換成一個不錯的導航菜單,並支持子菜單。jQuery Mobile可摺疊菜單

我已經設置了小提琴示例http://jsfiddle.net/T7QTF/1/

或什麼是最好的Nav我們可以支持子菜單的也是。

我使用下面的最新庫

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script> 

<div data-role="page" id="pageone"> 
    <div data-role="header"> 
     <h1>Welcome To My Homepage</h1> 

     <div data-role="collapsible-set"> 
      <ul> 
       <li><a href="#" data-icon="home">Home</a> 
       </li> 
       <li><a href="#" data-icon="arrow-r">Page Two</a> 
       </li> 
       <ul> 
        <li><a href="#" data-icon="arrow-r">Sub Page Page Two</a></li> 
        <li><a href="#" data-icon="search">Sub Page b </a></li> 
       </ul> 
       <li><a href="#" data-icon="search">Search</a> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div data-role="content"> 
     <p>My Content..</p> 
    </div> 
    <div data-role="footer"> 
     <h1>My Footer</h1> 

    </div> 
</div> 

回答

0

您可以嘗試嵌套的可摺疊套,因爲用戶可以選擇他們想要的菜單項不重定向到另一個頁面。所以在頁面中,兩個子頁面隱藏在可摺疊的內部。我不建議嵌套列表視圖,因爲它在您單擊最上面的一個菜單項時重定向。然後用戶需要點擊後退按鈕或其他東西。但是嵌套收藏品可以節省空間。而且用戶可以節省時間,而不需要返回到只查看子菜單是什麼。

這裏有一個可摺疊的例子。

http://demos.jquerymobile.com/1.3.0-rc.1/docs/demos/widgets/listviews/

+0

是嵌套這是最後一個似乎是一種選擇,但我不能找到我們如何可以移回到它只是在你不能回去前進方向上一級菜單選項。 – Learning

+0

你需要在那裏添加一個後退按鈕。收藏品和列表菜單之間的區別在於,您可以選擇子菜單(它們的標題),而無需點擊頂部菜單項並查看其子菜單並返回等。 –