jQuery实现树形菜单的三种方法
程序员文章站
2022-05-18 19:37:46
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>树形菜单</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script>
$(function(){
$(".treeMenu>li>a").click(function(){
// 方法一,需要给点击的a元素加id属性
// 获取当前点击的a元素的id值
// var idName = $(this).attr("id");
// 对象紧跟着当前点击的a元素的ul进行类样式反转
// $("#" + idName + " + ul").toggleClass("hidden");
// 方法二,需要给点击的a元素加id属性
// 对象紧跟着当前点击的a元素的元素进行类样式反转
// $(this).next().toggleClass("hidden");
// 方法三,不需要给点击的a元素加id属性
// 对象紧跟着当前点击的a元素的元素进行类样式反转
$(this).next().toggle(300,'linear');
});
});
</script>
<style type="text/css">
ul,li{
margin: 0px;
padding: 0px;
}
.treeMenu{
}
ul li a{
text-decoration: none;
color: black;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<h2><img src="../images/fold.gif"/>树形菜单</h2>
<ul class="treeMenu">
<li>
<img src="../images/fclose.gif"/>
<a id="currId" href="javascript:void(0);">文学艺术</a>
<ul class="hidden">
<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
</ul>
</li>
<li>
<img src="../images/fclose.gif"/>
<a id="currId1" href="javascript:void(0);">图片专区</a>
<ul class="hidden">
<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
</ul>
</li>
<li>
<img src="../images/fclose.gif"/>
<a id="currId2" href="javascript:void(0);">最新影视</a>
<ul class="hidden">
<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
<li><img src="../images/doc.gif"/><a href="javascript:void(0);">文学艺术</a></li>
</ul>
</li>
</ul>
</body>
</html>