jQuery Mobile菜单手风琴无法正常工作

我正在尝试设置jquerymobile网站，并且在头版的手风琴菜单上遇到了一些麻烦，下面是没有jquerymobile的手风琴的示例：http://dl.dropbox.com/u/22874377/Mobile/accordion.html但当与jquerymobile一起使用时，它不能正常工作，如下所示：http://dl.dropbox.com/u/22874377/Mobile/app.html jQuery Mobile菜单手风琴无法正常工作

即使我将它设置为手风琴，它也会强制页面从jquerymobile转换，并且可以加载子列表项，就好像它们一样被包含在一个单独的页面

任何想法，为什么这可能是？或者我能做些什么来解决它？

在这里，如果你不想要查看的工作实例

<style> 
#nav li ul { 
display: none; // used to hide sub-menus 
} 
</style> 
<script> 
$(document).ready(function() { 
    var checkCookie = $.cookie("nav-item"); 
    if (checkCookie != "") { 
    $('#nav > li > a:eq('+checkCookie+')').next().show(); 
    } 
    $('#nav > li > a').click(function(){ 
     var navIndex = $('#nav > li > a').index(this); 
     $.cookie("nav-item", navIndex); 
     $('#nav li ul').slideUp(); 
     if ($(this).next().is(":visible")){ 
     $(this).next().slideUp(); 
     } else { 
     $(this).next().slideToggle(); 
     } 
    }); 
}); 
</script> 
<ul id="nav" data-role="listview" data-inset="true"> 
       <li data-theme="c"> 
        <a href="#home" data-transition="flip"> 
         Home 
        </a> 
       </li> 
       <li data-theme="c" data-icon="arrow-d"> 
        <a href="#"> 
         Info 
        </a> 
        <ul> 
        <li data-theme="c"><a href="#" data-transition="flip">About Katie</a></li> 
        <li data-theme="c"><a href="#" data-transition="flip">Availability</a></li> 
        <li data-theme="c"><a href="#" data-transition="flip">Pricing</a></li> 
        <li data-theme="c"><a href="#" data-transition="flip">Contact</a></li> 
        <li data-theme="c"><a href="#" data-transition="flip">Downloads</a></li> 
        <li data-theme="c"><a href="#home" data-transition="flip">Back to Home</a></li> 
        </ul> 
       </li> 
       <li data-theme="c"> 
        <a href="#home" data-transition="flip"> 
         Galleries 
        </a> 
       </li> 
       <li data-theme="c" data-icon="arrow-d"> 
        <a href="#home" data-transition="flip"> 
         Client Proofs 
        </a> 
        <ul> 
        <li data-them="c"><a href="#" data-transition="flip">Monica &amp; Andrew's Excellent Wedding</a></li> 
        <li data-theme="c"><a href="#home" data-transition="flip">Back to Home</a></li> 
        </ul> 
       </li> 
       <li data-theme="c"> 
        <a href="#home" data-transition="flip"> 
         Testimonials 
        </a> 
       </li> 
      </ul>

来源

2012-07-30 JamesBong

你应该抓住点击一个已经扩展的选项卡，什么都不做。既然现在你可以通过点击相同的标签来使它变得疯狂。另外，由于它排队，所以你可以连续点击20次，只是看它有一段时间的动画。 – TheZ 2012-07-30 17:27:41

对不起，我不太确定你想说什么？如果你看看例子，你会看到我的意思是功能，它在非jquerymobile例子上工作得很好，但是当我使用jquerymobile它并没有正确触发手风琴 – JamesBong 2012-07-30 17:29:07

没关系，所以我通过添加一个如果你现在去看非jquerymobile手风琴，简单的cookie，真正的问题是我如何真正解决手头的问题？这是非jquerymobile – JamesBong 2012-07-30 17:41:18

快，只需在检查为例的不同链接元素，你可以看到他们有家& UI页= nav-（数字）的HREF属性，这会导致它打开一个新页面：... Mobile/app.html＃home & ui-page = nav-0

这就是为什么它会在新页面中打开，href属性应为空（或＃），因为你不会用它来浏览你的网站，只是用它来激活滑动上下...

（至于他们为什么得到这个，它可能是因为你的自动UI ...但我不能帮你在那里）

来源

2012-07-30 17:35:36

有趣的是，即使当我删除了一个HREF属性，只是把它留作一个李，它仍然打开它在一个新页面 – JamesBong 2012-07-30 17:43:54

如果你看看代码，你还会注意到，除了主页面的主页和返回到主页按钮 – JamesBong 2012-07-30 17:46:04

是的但是当你使用UI时（如jqueryUI），href属性全部为空或设置为＃）它会自动添加一些类，我的猜测是，您的jquerymobile将这些链接添加到href元素的末尾......当您从href中删除＆ui-page blabla时，它不会在新页面中打开。你可以在哪里阅读jquerymobile的文档？ – 2012-07-30 18:49:31

你有一个问题在这里

$(document).ready(function() { 
$('#nav > li > a').click(function(){ 
    if ($(this).attr('class') != 'active'){ 
    $('#nav li ul').slideUp(); 
    $(this).next().slideToggle(); 
}

}）这个简单的脚本;

的文件应该加上引号

$('document').ready(function() {

来源

2012-07-30 17:34:53

这是显然不是问题，因为你可以看到它的工作非常好，在非jquerymobile版本 – JamesBong 2012-07-30 17:40:07

尝试它，然后看....我总是陷入引号 – 2012-07-30 17:41:10

我做了测试，它仍然不能解决问题不幸的是，顺便说一句，我从来没有真的用这种方式'文档'，只有文档时调用一个函数，它总是工作.. – JamesBong 2012-07-30 17:43:07

jQuery Mobile菜单手风琴无法正常工作

回答

相关问题