1

我正在将 jquery 移动嵌套列表视图合并为我正在构建的 vBulletin 网站的移动版本的主导航菜单。请注意，您需要使用移动设备/模拟器，否则列表视图将不会显示。我正在通过更改 Safari 中的用户代理进行测试。

这是该网站的链接：

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

这是带有列表视图的 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>

包含嵌套列表视图的列表项是“For Members”项。

我对此进行了大量研究，甚至创建了一个具有相同 html 和 jquery/jq mobile 版本的 jsfiddle。

编辑： jsfiddle 确实有效。这就是我想说的。小提琴有效，但我网站上的代码没有，我不知道为什么。

http://jsfiddle.net/QfyZd/

我的结论是 vbulletin 中必须有其他 javascript 和/或 css 阻止子菜单显示。我尝试不包括两个 vBulletin javascript，但这有效果。

我不知道从这里去哪里。

编辑 - 我发现问题来自 vbulletin-mobile.js。我将文件解压缩并将其加载到我的服务器。似乎问题出现在第 799 - 1006 行的列表视图部分。那是相当多的行，到目前为止，我不知道在哪里。我会继续努力，但与此同时，如果有人有任何想法，我将不胜感激。

4

1 回答 1

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>
于 2013-09-03T10:10:35.447 回答