知识简介
- $(function(){}); 相当于javascript中的 οnlοad=function(){}
- $(".menu ul") 获取.menu下的ul标签 $(".menu ul")hide()方法，是将取得的列表隐藏
- $(".menu>li>a").click(function(){} 获取.menu下的直接li标签里的直接a标签，这里可能获取的标签有两个，菜单一或者菜单二，然后编写函数设置它的点击事件
-
$(this).next().slideToggle(“slow”); 使ul标签在显示，隐藏二者之间相互转换
这里的this就是获取到的a标签，
next()取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这里取到的是和a标签同级的ul元素
slideToggle(“slow”); 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示，slow设置的是动画的速度，还可以是fast、normal。
-
node.css(“background-image”).indexOf(“collapsed”)
css(“background-image”)访问匹配元素的background-image属性。indexOf(“collapsed”)匹配字符串，看当前的背景图片是不是collapsed.gif,是的话，返回collapsed所在位置，匹配不到，返回-1
- **node.css(“background-image”,“url(‘img/expanded.gif’)”); **修改背景图片
代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<style type="text/css">
ul{
/*去除引导符*/
list-style-type: none;
/*使li标签靠左对齐,无间距*/
padding-left: 0px;
}
a{
text-decoration: none;
color: #000;
display: inline-block;
padding-left: 20px;
padding-top: 3px;
padding-bottom: 3px;
width:100px;
}
.menu>li{
width:120px;
background-image: url("img/title.gif");
}
.menu>li li {
background-color: #eee;
}
.menu>li>a{
background: url("img/collapsed.gif") no-repeat 5% 50%;
color: #fff;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script>
$(function(){
$(".menu ul").hide();
$(".menu>li>a").click(function(){
$(this).next().slideToggle("slow");
changeImg($(this));
});
});
changeImg=function(node){
if(node){
if(node.css("background-image").indexOf("collapsed")>=0)
{
node.css("background-image","url('img/expanded.gif')");
}
else{
node.css("background-image","url('img/collapsed.gif')");
}
}
}
</script>
</head>
<body>
<ul class="menu">
<li><a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >菜单一</a>
<ul>
<li><a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >菜单项11</a></li>
<li><a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >菜单项12</a></li>
<li><a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >菜单项13</a></li>
</ul>
</li>
<li><a href="#" target="_blank" rel="external nofollow" >菜单二</a>
<ul>
<li><a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >菜单项21</a></li>
<li><a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >菜单项22</a></li>
<li><a href="javascript:void(0)" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >菜单项23</a></li>
</ul>
</li>
</ul>
</body>
</html>
效果展示
图片素材