Question

我正在尝试设置一个jquerymobile网站，我在首页上的手风琴菜单上遇到了一些麻烦。这是一个没有jquerymobile的手风琴的工作示例：http://dl.dropbox.com/u/22874377/Mobile/accordion.html但是当用于jquerymobile它不能正常工作：http://dl.dropbox.com/u/22874377/Mobile/app.html

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

关于为什么会出现这种情况的任何想法？或者我可以做些什么来解决它？

如果您不想查看工作示例，

这是简单的脚本

<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

你这里有问题

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

}）;

文件应在引号中

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

Answer 2

很快，只要通过检查示例中的不同链接元素，就可以看到它们有 home＆amp; ui-page = nav-（一个数字）作为href属性，导致它打开一个新页面：... Mobile / app.html＃home＆amp; ui-page = nav-0

这就是它在新页面中打开的原因，href属性应为空（或＃），因为您不会使用它来浏览您的网站，只需使用它来上下激活幻灯片......

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

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

2 个答案: