我正在通过简单的导航练习jQuery。有4个主要标签。每个都有自己的悬停颜色，即主导航栏中的暗色。我已经使用 CSS 来做这件事了。 但是当我点击它时我想更改标签颜色，再次单击时，我希望它还原。为此，我使用了 toggleClass（）函数。但事情不起作用，甚至悬停在放置此功能后停止工作。我的疑问是：
为什么会发生这种情况，悬停被禁用？ 如何正确使用toggleClass（）？ 有没有办法通过jQuery的悬停事件执行这些操作（显示隐藏菜单），而不是单击？ [我试过这个，子菜单显示但是一旦鼠标移出它们就会消失。我如何解决它？] 这是片段：
body{
margin: 0px;
}
#nav{
height: 40px;
background-color: #009999;
}
#navbar{
height: inherit;
width: 590px;
margin: auto;
}
#slide{
height: 400px;
background-color: #999999;
}
#content{
height: 100px;
background-color: #666666;
}
ul li{
float: left;
list-style: none;
padding: 5px 25px 5px 25px;
line-height: 30px;
background-color: #009999;
cursor: pointer;
text-decoration: none;
color: white;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border-left: 1px solid #006666;
transition-property: background-color;
transition-duration: 0.5s;
}
.c1{
border-right: 1px solid #006666;
}
ul li:hover{
background-color: #006666;
}
ul{
margin-top: -16px;
}
#dropdown{
position: absolute;
width: 92.5%;
//display: none;
padding:10px 0 10px 100px;
color: white;
font-family: Arial, Helvetica, sans-serif;
background-color:#00CCCC;
display: none;
}
.c7{
background-color: #006666;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
$(document).ready(function(){
$("li").eq(0).click( function(){
$(".c2").fadeToggle(300);
$("li").eq(0).toggleClass("c7");
$(".dropcontainer #dropdown").eq(0).siblings().fadeOut("fast");
$("li").eq(0).siblings().css("background-color", "#009999");
});
$("li").eq(1).click( function(){
$(".c3").fadeToggle(300);
$("li").eq(1).toggleClass("c7");
$(".dropcontainer #dropdown").eq(1).siblings().fadeOut("fast");
$("li").eq(1).siblings().css("background-color", "#009999");
});
$("li").eq(2).click( function(){
$(".c4").fadeToggle(300);
$("li").eq(2).toggleClass("c7");
$(".dropcontainer #dropdown").eq(2).siblings().fadeOut("fast");
$("li").eq(2).siblings().css("background-color", "#009999");
});
$("li").last().click(function(){
$(".c5").fadeToggle(300);
$("li").eq(3).toggleClass("c7");
$(".dropcontainer #dropdown").eq(3).siblings().fadeOut("fast");
$("li").eq(3).siblings().css("background-color", "#009999");
});
});
</script>
</head>
<body>
<div id="nav">
<div id="navbar">
<ul>
<li>Tech</li>
<li>National</li>
<li>Sports</li>
<li class="c1">Contact</li>
</ul>
</div>
</div>
<div class="dropcontainer">
<div id="dropdown" class="c2">
<p>Tech</p>
<p>Tech2</p>
<p>Tech3</p>
</div>
<div id="dropdown" class="c3">
<p>National</p>
<p>National2</p>
<p>National3</p>
</div>
<div id="dropdown" class="c4">
<p>Sports</p>
<p>Sports2</p>
<p>Sports3</p>
</div>
<div id="dropdown" class="c5">
<p>Contact</p>
<p>Contact2</p>
<p>Contact3</p>
</div>
</div>
<div id="slide"></div>
<div id="content"></div>
</body>
</html>
答案 0 :(得分：0)
我认为这就是你想要的。试试看吧！
我评论过我认为没有必要。
说明：以编程方式应用css规则时，例如
.css("background-color", "#009999")比这更受限制 您在样式定义中拥有的规则。这就是所谓的特异性。你有一个链接 - ＆gt; CSS Specificity
之后，：hover将按需运行。
另外，我删除了容器fadeOut，并添加了一些id的处理（并删除了last（）并使用了一个真正的索引，现在它似乎正常工作。
为什么会发生这种情况，悬停被禁用？＆lt; - 来自.css并且参考特定元素的特异性大于样式定义。
如何正确使用toggleClass（）？＆lt; - Toggle类会在没有它的情况下添加它，如果有的话将其删除。
有没有办法通过jQuery的悬停事件执行这些操作（显示隐藏的菜单），而不是单击？ [我试过这个，子菜单显示但是它们很快消失了当鼠标移出。我该如何解决？]＆lt; ---您还可以使用mouseover()或hover()方法。它们的工作方式类似于点击，但是你需要在条形图下方的菜单中使用mouseout()，以便在指向时隐藏它......并且它将会更多工作:)
以下是片段：
body {
margin: 0px;
}
#nav {
height: 40px;
background-color: #009999;
}
#navbar {
height: inherit;
width: 590px;
margin: auto;
}
#slide {
height: 400px;
background-color: #999999;
}
#content {
height: 100px;
background-color: #666666;
}
ul li {
float: left;
list-style: none;
padding: 5px 25px 5px 25px;
line-height: 30px;
background-color: #009999;
cursor: pointer;
text-decoration: none;
color: white;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border-left: 1px solid #006666;
transition-property: background-color;
transition-duration: 0.5s;
}
.c1 {
border-right: 1px solid #006666;
}
ul li:hover {
background-color: #006666;
}
ul {
margin-top: -16px;
}
#dropdown {
position: absolute;
width: 92.5%;
//display: none;
padding: 10px 0 10px 100px;
color: white;
font-family: Arial, Helvetica, sans-serif;
background-color: #00CCCC;
display: none;
}
.c7 {
background-color: #006666;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>
$(document).ready(function() {
$("li").eq(0).click(function() {
$(".c2").fadeToggle(300);
$(".c3").fadeOut(300);
$(".c4").fadeOut(300);
$(".c5").fadeOut(300);
$("li").eq(0).toggleClass("c7");
$("li").eq(1).removeClass("c7");
$("li").eq(2).removeClass("c7");
$("li").eq(3).removeClass("c7");
//$(".dropcontainer #dropdown").eq(0).fadeOut("fast");
//$("li").eq(0).css("background-color", "#009999");
});
$("li").eq(1).click(function() {
$(".c3").fadeToggle(300);
$(".c2").fadeOut(300);
$(".c4").fadeOut(300);
$(".c5").fadeOut(300);
$("li").eq(1).toggleClass("c7");
$("li").eq(0).removeClass("c7");
$("li").eq(2).removeClass("c7");
$("li").eq(3).removeClass("c7");
//$(".dropcontainer #dropdown").eq(1).fadeOut("fast");
//$("li").eq(1).css("background-color", "#009999");
});
$("li").eq(2).click(function() {
$(".c4").fadeToggle(300);
$(".c2").fadeOut(300);
$(".c3").fadeOut(300);
$(".c5").fadeOut(300);
$("li").eq(2).toggleClass("c7");
$("li").eq(0).removeClass("c7");
$("li").eq(1).removeClass("c7");
$("li").eq(3).removeClass("c7");
//$(".dropcontainer #dropdown").eq(2).fadeOut("fast");
//$("li").eq(2).css("background-color", "#009999");
});
$("li").eq(3).click(function() {
$(".c5").fadeToggle(300);
$(".c2").fadeOut(300);
$(".c3").fadeOut(300);
$(".c4").fadeOut(300);
$("li").eq(3).toggleClass("c7");
$("li").eq(0).removeClass("c7");
$("li").eq(1).removeClass("c7");
$("li").eq(2).removeClass("c7");
//$(".dropcontainer #dropdown").eq(3).fadeOut("fast");
//$("li").eq(3).css("background-color", "#009999");
});
});
</script>
</head>
<body>
<div id="nav">
<div id="navbar">
<ul>
<li>Tech</li>
<li>National</li>
<li>Sports</li>
<li class="c1">Contact</li>
</ul>
</div>
</div>
<div class="dropcontainer">
<div id="dropdown" class="c2">
<p>Tech</p>
<p>Tech2</p>
<p>Tech3</p>
</div>
<div id="dropdown" class="c3">
<p>National</p>
<p>National2</p>
<p>National3</p>
</div>
<div id="dropdown" class="c4">
<p>Sports</p>
<p>Sports2</p>
<p>Sports3</p>
</div>
<div id="dropdown" class="c5">
<p>Contact</p>
<p>Contact2</p>
<p>Contact3</p>
</div>
</div>
<div id="slide"></div>
<div id="content"></div>
</body>
</html>