为什么我的jQuery不在HTML页面中工作？

更新时间：2022-12-15 07:41:23

（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 &gt ; < a href = ＃ > 菜单2 < / a > < / li >
< li > < a href = ＃ > 菜单3 < / a > < / li >
< / ul >
< / li >
< li > < a href = ＃ > 公司< / a &gt ; < / li >
< li > < a href = ＃ > 关于我们< / a > < ul >
< li > < a href = ＃ > 菜单1 < / a > < / li >
< li > < a href = ＃ > 菜单2 < / a > < / li > an>
< li > < a href = ＃ > 菜单3 < / a > < / li >
< / ul >
< / li >
< n> / 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;
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;
}
==============================================

上一篇 : ：SendGrid - 使用sendgrid-java.jar的NoClassDeffoundError下一篇 : Sendgrid / PHP / Heroku不工作

为什么我的jQuery不在HTML页面中工作？

相关阅读

技术问答最新文章