为什么我的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  ：  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  ：  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屋！