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

Question

我正在尝试建立一个 jquerymobile 站点，但我在首页的手风琴菜单上遇到了一点问题，这是一个没有 jquerymobile 的手风琴的工作示例：http://dl.dropbox.com/u/22874377/Mobile/accordion.html 但当与 jquerymobile 一起使用时在这里看到的不起作用：http://dl.dropbox.com/u/22874377/Mobile/app.html

几乎发生的事情是，即使我将它设置为手风琴，它也会强制从 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>

Answer 1

很快，只需检查示例中的不同链接元素，您就可以看到它们有 home&ui-page=nav-(a number) 作为 href 属性，这会导致它打开一个新页面：...Mobile/app.html#home&ui-page=nav-0

这就是它在新页面中打开的原因，href 属性应该为空（或 #），因为您不会使用它来导航您的网站，而只是使用它来激活上下滑动...

（至于他们为什么会得到这个，可能是因为你的自动用户界面......但我无法帮助你）

Answer 2

你有问题

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

});

文档应该用引号引起来

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