1. 首頁
  2. 問答
  3. jquery移動嵌套列表視圖不顯示子菜單

jquery移動嵌套列表視圖不顯示子菜單

2012-12-30 81 views
1

我正在合併一個jQuery的移動嵌套列表視圖作爲我正在建設的vBulletin站點的移動版本的主導航菜單。請注意，您將需要使用移動設備/模擬器，否則不會顯示列表視圖。我正在通過更改Safari中的用戶代理來進行測試。jquery移動嵌套列表視圖不顯示子菜單

下面是該網站的鏈接：

http://www.ulbf.innov-images.com/content.php?6-home

下面是使用ListView的HTML：

<ul data-role="listview">  
    <li><a href="register.php">How to Join</a></li> 
    <li><a href="memberlist.php">Find a Service or Member</a></li> 
    <li><a href="sendmessage.php">Contact Us</a></li>      
    <li>For Members 
     <ul data-role="listview"> 
      <li><a href="#">History &amp; Mission</a></li> 
      <li><a href="#">Success Stories</a></li> 
      <li><a href="#">Current Officers</a></li> 
      <li><a href="#">Past Events &amp; Topics</a></li> 
     </ul> 
    </li> 
</ul>

包含嵌套列表視圖列表項爲 「會員」 的項目。

我已經做了相當多的研究，甚至用相同的html和jquery/jq移動版本創建了jsfiddle。

編輯：jsfiddle的確的工作。這就是我想說的。小提琴的作品，但我的網站上的代碼不，我不明白爲什麼。

http://jsfiddle.net/QfyZd/

我的結論是，必須有其他的JavaScript和/或vBulletin是防止從子菜單顯示CSS。我試過不包括兩個vBulletin javascripts，但是這有效果。

我不確定該從哪裏出發。

編輯 - 我發現問題來自vbulletin-mobile.js。我將文件取消分類並將其加載到我的服務器。看起來問題出現在第799 - 1006行的listview部分。這是很多行，到目前爲止，我不知道在哪裏。我會繼續嘗試，但同時如果有人有任何想法，我會很感激的幫助。

來源

2012-12-30 clhereistian

+0

你在的jsfiddle子爲我工作就好 – peterm

+0

BTW，你不需要使用'數據角色=「列表視圖」'次列表上。您也可以考慮爲子菜單使用單獨的頁面。這不是必要的，但您可以更好地控制次要列表視圖的外觀和行爲。 – peterm

+0

peterm是對的，你的jsFiddle例子工作得很好。 – Gajotres

回答

0

jQuery Mobile的嵌套列表視圖

<!DOCTYPE html> 
<html> 
    <head> 
     <title>jQM Complex Demo</title> 
     <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>  
    </head> 
    <body> 
     <div data-role="page" id="index"> 
      <div data-theme="b" data-role="header"> 
       <h1>Index page</h1> 
      </div> 

      <div data-role="content"> 
       <ul data-role="listview" data-header-theme="e"> 
        <li>Animals 
         <ul> 
          <li>Pets 
           <ul> 
            <li><a href="index.html">Canary</a></li> 
            <li><a href="index.html">Cat</a></li> 
            <li><a href="index.html">Dog</a></li> 
           </ul> 
          </li> 
          <li>Farm animals 
           <ul> 
            <li><a href="index.html">Chicken</a></li> 
            <li><a href="index.html">Cow</a></li> 
            <li><a href="index.html">Sheep</a></li> 
           </ul> 
          </li> 
          <li>Wild animals> 
           <ul> 
            <li><a href="index.html">Alligator</a></li> 
            <li><a href="index.html">Bear</a></li> 
            <li><a href="index.html">Zebra</a></li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
        <li>Colors 
         <ul> 
          <li><a href="index.html">Blue</a></li> 
          <li><a href="index.html">Green</a></li> 
          <li><a href="index.html">Red</a></li> 
         </ul> 
        </li> 
        <li>Vehicles 
         <ul> 
          <li>Cars 
           <ul> 
            <li><a href="index.html">Audi</a></li> 
            <li><a href="index.html">BMW</a></li> 
            <li><a href="index.html">Volkswagen</a></li> 
           </ul> 
          </li> 
          <li>Planes 
           <ul> 
            <li><a href="index.html">Boeing</a></li> 
            <li><a href="index.html">Embraer</a></li> 
            <li><a href="index.html">Airbus</a></li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
       </ul><br/><br/> 
       <div data-role="collapsible-set" data-theme="b" data-content-theme="d" data-inset="false"> 
        <div data-role="collapsible"> 
         <h2>Filtered list</h2> 
         <ul data-role="listview" data-filter-theme="c" data-divider-theme="d" data-inset="false"> 
          <li><a href="index.html">Adam Kinkaid</a></li> 
          <li><a href="index.html">Alex Wickerham</a></li> 
          <li><a href="index.html">Avery Johnson</a></li> 
          <li><a href="index.html">Bob Cabot</a></li> 
          <li><a href="index.html">Caleb Booth</a></li> 
         </ul> 
        </div> 
        <div data-role="collapsible"> 
         <h2>Formatted text</h2> 
         <ul data-role="listview" data-theme="d" data-divider-theme="d"> 
          <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li> 
          <li><a href="index.html"> 
           <h3>Stephen Weber</h3> 
           <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p> 
           <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> 
           <p class="ui-li-aside"><strong>6:24</strong>PM</p> 
           </a></li> 
          <li><a href="index.html"> 
           <h3>jQuery Team</h3> 
           <p><strong>Boston Conference Planning</strong></p> 
           <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p> 
           <p class="ui-li-aside"><strong>9:18</strong>AM</p> 
           </a></li> 
         </ul> 
        </div> 
        <div data-role="collapsible"> 
         <h2>Thumbnails and split button</h2> 
         <ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="false"> 
          <li><a href="index.html"> 
           <img src="../../_assets/img/album-bb.jpg"> 
            <h3>Broken Bells</h3> 
            <p>Broken Bells</p> 
           </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album 
           </a></li> 
           <li><a href="index.html"> 
            <img src="../../_assets/img/album-hc.jpg"> 
             <h3>Warning</h3> 
             <p>Hot Chip</p> 
            </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album 
            </a></li> 
            <li><a href="index.html"> 
             <img src="../../_assets/img/album-p.jpg"> 
              <h3>Wolfgang Amadeus Phoenix</h3> 
              <p>Phoenix</p> 
             </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album 
             </a></li> 
            </ul> 
           </div> 
          </div>     
         </div> 
        </div>  
       </body> 
      </html>

來源

2013-09-03 10:10:35 user2742591

相關問題

 相關問題