Question

我会改写所有，因为我可能没有很好地解释自己（抱歉我的英语不好）我有2个html页面：index.hmtl和info.html 所有html页面都有一个带有页面名称的div和一个小菜单图标，当你点击图标时，菜单出现并消失（类似于facebook app中的菜单）。有这种可见和不可见的切换我切换了两个类。如果我打开我的html.it并单击菜单按钮就可以正常工作，菜单会出现并消失菜单是一个ul链接到其他html页面。如果单击某个链接，浏览器将加载该页面（例如info.html），其上部（页面名称和小图标）中的相同div和不同的内容。如果我点击info.html页面中的图标菜单，则菜单的开关不起作用。如果我刷新info.html页面，菜单图标会显示并隐藏ul菜单。

我所有页面中的代码（标题部分）是：

<div id ="header-status" data-role="header" data-position="fixed" data-theme="a">
     <img id="menu" src="img/menu.png" /> <h2>Pas.si</h2>
 </div>

 <ul id="listamenu" class="classmenua">
     <li> <a href="index.html"> Percorsi </a> </li>
     <li>  <a href="info.html"> Info </a> </li>
     <li> <a href="ARworld.html"> World </a> </li>
 </ul>

 <div class="content">
 [..........]
 </div>

<script type="text/javascript">
        $('#menu').click(function() {
                         $('#listamenu').toggleClass('classmenub', 'classmenua');
                }
          );
 </script>

使用的css类是在所有html页面中加载的css文件中。这是本部分的CSS：

#listamenu{ width:80%;
        height:100%;
        background-color:#0CF;
        margin:0;
        position:absolute;
        padding:0;
}
#listamenu li{ list-style:none;
            padding:10px;
            color:#fff;
}
#listamenu li a{ color:#fff;
            font-weight:normal;
}
#listamenu li:active{ color:#0CF;
            background-color:#fff;
}
.classmenua{ visibility:hidden;
        z-index:-1;
}
.classmenub{ visibility:visible;
        z-index:1;
}

返回false;不起作用。
.toggleClass（'classmenub classmenua'）用于切换菜单，但如果我进入另一页，则会出现相同的错误
控制台没有错误，我在firefox上测试，最后更新：D
希望你现在能理解XD再次抱歉

Answer 1

在JQuery中，如果您希望return false默认事件不发生，可以在事件处理程序的末尾添加click。

$({
  $('#menu a').click(function() {
    $('#listamenu').toggleClass('classmenub classmenua');
    return false;
   });
 });

此fiddle显示了代码的工作示例。

这SO question解释得非常好：

来自jQuery事件处理程序的
return false实际上与在传递的jQuery.Event对象上调用e.preventDefault和e.stopPropagation相同。

e.preventDefault()将阻止发生默认事件，e.stopPropagation()将阻止事件冒泡并返回false将同时执行这两项操作。请注意，此行为与普通（非jQuery）事件处理程序不同，其中，特别是，返回false不会阻止事件冒泡。

Answer 2

检查docs，如果您向toggleClass

提供两个这样的参数

.toggleClass( className, switch )

第二个将被视为布尔值，这可能不是你想要的。

如果您只想切换一个类列表，请在一个参数中提供它们，但用空格分隔，如下所示：

.toggleClass('classmenub classmenua')

Answer 3

如果我说得对，你唯一想做的就是切换菜单。切换按钮不是链接，因此我们不必使用preventDefault等。

我复制了你的代码，让它运行得很好。我想知道你在哪里放置了jQ我应该在

之上

以下示例使类更改。尝试使用此结构，看看它是否适合您。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id ="header-status" data-role="header" data-position="fixed" data-theme="a">
    <img id="menu" src="img/menu.png">
     <h2>Pas.si</h2>
 </div>

 <ul id="listamenu" class="classmenua">
     <li> <a href="index.html"> Percorsi </a> </li>
     <li>  <a href="info.html"> Info </a> </li>
     <li> <a href="ARworld.html"> World </a> </li>
 </ul>
<!-- Include javascript before the closing body tag </body> -->
<!-- jQuery include via CDN -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- Here comes your own scipt (after the include) -->
<script type="text/javascript">
        $('#menu').click(function() {
                         $('#listamenu').toggleClass('classmenub', 'classmenua');
                }
          );
 </script>

</body>
</html>

当jQuery放在关闭的body标签之前。如果DOM已准备好加载，它将被触发。其他明智的你需要使用：

$('document').ready(function(){
     //your code here
});

我更喜欢第一种选择。

如果我加载另一个页面，我的jQuery停止工作

3 个答案: