展开和折叠项

清疚 2022-09-27 15:29 204阅读 0赞

这个是用列表来制作的简单的折叠效果。

<!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>  
<style type="text/css">  
.top\{  
width:500px;  
margin:0 auto;  
\}  
.plus\{  
list-style-image:url(1.jpg);/\*这些是列表前面的标识，这里设成了图片\*/  
\}  
.min\{  
list-style-image:url(2.jpg);  
\}  
.none\{  
list-style-image:none;  
\}  
ul li\{  
margin-top:10px;  
\}  
</style>  
<script src="jquery-2.1.3.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(document).ready(function() \{  
    $('.drink').children().hide();  
$('.drink').children().addClass("none");  
$('.drink').addClass('plus');  
  
$('.drink').click(function(event)\{  
if(this==event.target)\{                                               /\*这里是比较关键的，用event.target来获取点击事件的元素                                                                                              \*/  
if($(this).is('.plus'))\{                                                 /\*如果点击事件的元素的css样式是等于'.plus'的，那就说明该                                                                                           列表没有展开，我们接下来的工作就是将列表展开。\*/  
$(this).removeClass('plus');  
$(this).addClass('min');  
$(this).children().show();  
\}  
else\{                                                                          /\*否则我们就要将该列表进行折叠\*/  
$(this).removeClass("min");  
$(this).addClass("plus");  
$(this).children().hide();  
\}  
\}  
\});  
\});  
</script>  
</head>  
<body>  
<div class="top">  
<ul>  
<li class="drink">Tea  
<ul><li>Dar</li>  
<li class="drink">Assam  
<ul><li>Green</li>  
<li>Herbal</li></ul></li>  
<li>Herala</li>  
</ul>  
<li class="drink">Coffee  
<ul>  
<li>Cochin</li>  
<li>Kerala</li>  
</ul>  
</li>  
</ul>  
</div>  
</body>

</html>

![Center][]

[Center]: /images/20220708/36d3a57285424ff4af6ca75990e46be1.png