爱站程序员基地jQuery实现折叠卡片效果
- jQuery实现折叠卡片效果
jQuery实现折叠卡片效果
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>折叠卡片特效</title><script src=\"../jquery-3.1.1.js\"></script><script>$(function(){function close(){$(this).siblings(\".dropbox\").stop(true).slideUp(\"fast\");}$(\".box ul li h4\").click(function(){$(this).siblings(\".dropbox\").stop(true).slideDown(\"fast\");// alert(\"test\");}).dblclick(close);});</script><style type=\"text/css\">*{margin: 0;padding: 0;}.box{width: 200px;/* height: 600px; */margin: 50px 150px;border: 1px solid black;}.box ul{list-style: none;/* padding-left: 5px; */}.box ul li{/* width: 100%; */padding: 10px 0;text-indent: 1rem;/* height: 30px; */background-color: #eee;border-bottom: 1px solid gray;/* position: relative; */}.dropbox{width: 200px;/* height: ; */display: none;/* position: absolute; */}.dropbox ol{list-style: none;}.dropbox ol li{padding: 10px 10px;height: 20px;text-indent: 1rem;background-color: white;}</style></head><body><div class=\"box\"><ul><li class=\"l1\"><h4>哲学</h4><div class=\"dropbox\"><ol><li>选项</li><li>选项</li><li>选项</li><li>选项</li></ol></div></li><li class=\"l1\"><h4>哲学</h4><div class=\"dropbox\"><ol><li>选项</li><li>选项</li><li>选项</li><li>选项</li></ol></div></li><li class=\"l1\"><h4>哲学</h4><div class=\"dropbox\"><ol><li>选项</li><li>选项</li><li>选项</li><li>选项</li></ol></div></li><li class=\"l1\"><h4>哲学</h4><div class=\"dropbox\"><ol><li>选项</li><li>选项</li><li>选项</li><li>选项</li></ol></div></li><li class=\"l1\"><h4>哲学</h4><div class=\"dropbox\"><ol><li>选项</li><li>选项</li><li>选项</li><li>选项</li></ol></div></li></ul></div></body></html>
效果图：
