jquery简单实现树形结构收缩展开效果
生活随笔
收集整理的這篇文章主要介紹了
jquery简单实现树形结构收缩展开效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
代碼量很少，注意要取消冒泡 ??e.stopPropagation();
<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><title></title><style type="text/css">.child{ display: none;}li{ cursor: pointer;}</style><script src="ajaxDomain/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">$(function(){$("li").click(function(e){e.stopPropagation();var childs=$(this).children(".child");if(childs.is(":hidden")){childs.slideDown();}else{childs.slideUp();}})})</script></head><body><ul><li>這是第一行<ul class="child"><li>第一行子行<ul class="child"><li>三級？<ul class="child"><li>還有！？<ul class="child"><li>坑爹！？</li><li>坑爹！？</li><li>坑爹！？</li></ul></li><li>還有！？</li><li>還有！？</li></ul></li></li><li>三級？</li><li>三級？</li><li>三級？</li><li>三級？</li></ul></li><li>第一行子行</li><li>第一行子行</li><li>第一行子行</li></ul></li><li>這是第二行<ul class="child"><li>坑爹！？</li><li>坑爹！？</li><li>坑爹！？</li></ul></li><li>這是第三行</li></ul></body> </html>?
轉載于:https://www.cnblogs.com/lihui1030/p/3829240.html
總結
以上是生活随笔為你收集整理的jquery简单实现树形结构收缩展开效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CC++初学者编程教程(8) VS201
- 下一篇： Android 自定义 ListView