为什么我的jQuery不在HTML页面中工作? [英] Why my jQuery is not Working that is in HTML page?
问题描述
我正在创建下拉菜单,当我将鼠标悬停在列表项仪表板和关于我们时,它将不会切换它的子菜单。我正在使用jQuery切换子菜单
HTML页面代码
================================================= ==================
< !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 >
< meta http-equiv = Content-Type content = text / html的; charset = utf-8 / > ;
< title > 主页< / title > ;
< link href = aStyle.css type = text / css rel = stylesheet / >
<! - < script src =jQuery.jstype =text / javascript/> - >
< script type = text / javascript src = js / jquery-1.9.1.js > < / script >
< script 类型 = text / javascript >
$(document).ready(function(){
$('ul> li')。hover (功能() {
$(this).find('ul> li')。show(3000);
});
});
< / script >
< / head >
< body >
< div class = nav >
< ul >
< li > < a href = # > 主页< / a > < / li >
< li > < a href = # > 信息中心< / a >
< ul >
< li > < a href = # > 菜单1 < / a > < / li >
< li > ; < a href = # > 菜单2 < / a > < / li >
< li > < a href = # > 菜单3 < / a > < / li >
< / ul >
< span class =code-keyword>< / li >
< li > < a href = # > 公司< / a > ; < / li >
< li > < a < span class =code-attribute> href = # > 关于我们< / a > < ul >
< li > < a href = # > 菜单1 < / a > < / li >
< li > < a href = # > 菜单2 < / a > < / li >
< li > < a href = # > 菜单3 < / a > < / li >
< / ul >
< / li >
< / ul >
< / div >
< / body >
< / html >
===================================
CSS代码
====================================
@ charset utf-8;
/ * CSS Document * /
正文 {
background-color : #CCC;
margin : 0 auto;
clear : both;
width : 70%;
}
a {
text-decoration : none;
}
。 nav ul {
list-style 温泉n> : none;
margin : 0;
padding : 0;
}
。 nav ul li {
float : left;
宽度 : 120px;
list-style : none;
高度 : 30px;
text-align : center;
line-height : 30px;
< span class =code-attribute> background-color : #FF0000;
}
。 nav ul li a {
color : #CCCCCC;
text-decoration : 无;
}
。 nav ul li li {
background-color : #ff0000;
margin-bottom : 2px;
display : none;
}
。 nav ul li li a {
text-decoration : 无;
}
。 nav ul li li:hover {
background-color : #09F;
}
========================== ====================
(document).ready(function(){
('ul> li')。hover(function(){
(this).find('ul> li')。show(3000) ;
});
});
< / script >
< / head >
< body >
< div class = nav >
< ul >
< li > < a href = # > 主页< / a > < / li >
< li > < a href = # > 信息中心< / a >
< ul >
< li > < a href = # > 菜单1 < / a > < / li >
< li > ; < a href = # > 菜单2 < / a > < / li >
< li > < a href = # > 菜单3 < / a > < / li >
< / ul >
< span class =code-keyword>< / li >
< li > < a href = # > 公司< / a > ; < / li >
< li > < a < span class =code-attribute> href = # > 关于我们< / a > < ul >
< li > < a href = # > 菜单1 < / a > < / li >
< li > < a href = # > 菜单2 < / a > < / li >
< li > < a href = # > 菜单3 < / a > < / li >
< / ul >
< / li >
< / ul >
< / div >
< / body >
< / html >
===================================
CSS代码
====================================
@ charset utf-8;
/ * CSS Document * /
正文 {
background-color : #CCC;
margin : 0 auto;
clear : both;
width : 70%;
}
a {
text-decoration : none;
}
。 nav ul {
list-style 温泉n> : none;
margin : 0;
padding : 0;
}
。 nav ul li {
float : left;
宽度 : 120px;
list-style : none;
高度 : 30px;
text-align : center;
line-height : 30px;
< span class =code-attribute> background-color : #FF0000;
}
。 nav ul li a {
color : #CCCCCC;
text-decoration : 无;
}
。 nav ul li li {
background-color : #ff0000;
margin-bottom : 2px;
display : none;
}
。 nav ul li li a {
text-decoration : 无;
}
。 nav ul li li:hover {
background-color : #09F;
}
========================== ====================
i am creating dropdown menu,and when i hover on List Item 'Dashboard' and 'About Us' it will not toggle it's Submenus. And i am toggling submenu by using jQuery
HTML Page Code
===================================================================
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="aStyle.css" type="text/css" rel="stylesheet" />
<!--<script src="jQuery.js" type="text/javascript" /> -->
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul>li').hover(function() {
$(this).find('ul>li').show(3000);
});
});
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Dashboard</a>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</li>
<li><a href="#">Company</a></li>
<li><a href="#">About Us</a><ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
===================================
CSS Code
====================================
@charset "utf-8";
/* CSS Document */
body{
background-color:#CCC;
margin:0 auto;
clear:both;
width:70%;
}
a{
text-decoration:none;
}
.nav ul{
list-style:none;
margin:0;
padding:0;
}
.nav ul li{
float:left;
width:120px;
list-style:none;
height:30px;
text-align:center;
line-height:30px;
background-color:#FF0000;
}
.nav ul li a{
color:#CCCCCC;
text-decoration:none;
}
.nav ul li li{
background-color:#ff0000;
margin-bottom:2px;
display:none;
}
.nav ul li li a{
text-decoration:none;
}
.nav ul li li:hover{
background-color:#09F;
}
==============================================
(document).ready(function() {
('ul>li').hover(function() {
(this).find('ul>li').show(3000); }); }); </script> </head> <body> <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Dashboard</a> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </li> <li><a href="#">Company</a></li> <li><a href="#">About Us</a><ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </li> </ul> </div> </body> </html>
===================================
CSS Code
====================================
@charset "utf-8"; /* CSS Document */ body{ background-color:#CCC; margin:0 auto; clear:both; width:70%; } a{ text-decoration:none; } .nav ul{ list-style:none; margin:0; padding:0; } .nav ul li{ float:left; width:120px; list-style:none; height:30px; text-align:center; line-height:30px; background-color:#FF0000; } .nav ul li a{ color:#CCCCCC; text-decoration:none; } .nav ul li li{ background-color:#ff0000; margin-bottom:2px; display:none; } .nav ul li li a{ text-decoration:none; } .nav ul li li:hover{ background-color:#09F; }
==============================================
这篇关于为什么我的jQuery不在HTML页面中工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!