我正在努力将jquery移动嵌套列表视图合并为我正在构建的vBulletin站点的移动版本上的主导航菜单。请注意，您将需要使用移动设备/模拟器，否则列表视图将不会显示。我正在通过更改Safari中的用户代理来进行测试。
以下是该网站的链接：
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 & Mission</a></li>
<li><a href="#">Success Stories</a></li>
<li><a href="#">Current Officers</a></li>
<li><a href="#">Past Events & Topics</a></li>
</ul>
</li>
</ul>
包含嵌套列表视图的列表项是“For Members”项。
我对此做了很多研究，甚至创建了一个jsfiddle，其中包含相同的html和jquery / jq mobile版本。
编辑：jsfiddle确实有效。这就是重点。小提琴有效，但我网站上的代码没有，我无法弄清楚原因。我的结论是vbulletin中必须有其他javascript和/或css阻止子菜单显示。我尝试不包括两个vBulletin javascripts，但这有效果。
我不确定从哪里开始。
编辑 - 我发现问题来自vbulletin-mobile.js。我取消了文件并将其加载到我的服务器。似乎问题出现在第799行至第1006行的listview部分中。这是相当多的几行，到目前为止我无法弄清楚在哪里。我会继续努力，但与此同时，如果有人有任何想法，我将不胜感激。
答案 0 :(得分：0)
jquery移动嵌套列表视图
<!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>