展开和折叠项

    xiaoxiao2021-03-25  119

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

    <!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>

    转载请注明原文地址: https://ju.6miu.com/read-14482.html

    最新回复(0)