【WEB开发】css3和jQuery实现手风琴折叠菜单效果
|
admin
2025年7月16日 23:52
本文热度 7
|
以下内容转自：https://www.cnblogs.com/li-sir/p/7359212.html
1.源码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } body { font: 14px/22px "Microsoft YaHei", arial, serif; } a, a:link, a:visited { color: #ccc; text-decoration: none; } .content { margin: 50px auto; width: 220px; height: auto; } .content > ul { list-style: none; } .content .menu-one > li { width: 220px; height: auto; overflow: hidden; border-top: 1px solid #888; } .content .menu-one > li.firstChild { border: 0; } .content .menu-one .header { height: 35px; background: #666; line-height: 34px; text-indent: 15px; cursor: pointer; } .content .menu-one .header:hover, .content .menu-one .menuOne-current { background: #777; } .content .menu-one .header > span { display: block; } .content .menu-one .header .txt { float: left; color: #fff; } .content .menu-one .header .arrow { float: right; width: 35px; height: 35px; background: url(arrow-d.png) no-repeat center center; } .content .menu-two { display: none; width: 220px; height: auto; } .content .menu-two li { width: 220px; height: 35px; background: #eee; border-top: 1px solid #ccc; line-height: 34px; text-indent: 40px; } .content .menu-two li.firstChild { border: 0; } .content .menu-two li a { display: block; color: #888; } .content .menu-two li:hover, .content .menu-two li.menuTwo-current { background: #fff; } .content .menu-show .header { background: #777; } .content .menu-show .header .arrow { background-image: url(arrow-u.png); } </style></head><body><div class="content"> <ul class="menu-one"> <li class="firstChild"> <div class="header"><span class="txt">一、HTML5基础教程</span> <span class="arrow"></span></div> <ul class="menu-two"> <li class="firstChild"><a href="#">HTML5基础教程01</a></li> <li><a href="#">HTML5基础教程02</a></li> <li><a href="#">HTML5基础教程03</a></li> <li><a href="#">HTML5基础教程04</a></li> </ul> </li> <li> <div class="header"><span class="txt">二、CSS3基础教程</span> <span class="arrow"></span></div> <ul class="menu-two"> <li class="firstChild"><a href="#">CSS3基础教程01</a></li> <li><a href="#">CSS3基础教程02</a></li> <li><a href="#">CSS3基础教程03</a></li> <li><a href="#">CSS3基础教程04</a></li> </ul> </li> <li> <div class="header"><span class="txt">三、JavaScript基础教程</span> <span class="arrow"></span></div> <ul class="menu-two"> <li class="firstChild"><a href="#">JavaScript基础教程01</a></li> <li><a href="#">JavaScript基础教程02</a></li> <li><a href="#">JavaScript基础教程03</a></li> <li><a href="#">JavaScript基础教程04</a></li> </ul> </li> <li> <div class="header"><span class="txt">四、PHP基础教程</span> <span class="arrow"></span></div> <ul class="menu-two"> <li class="firstChild"><a href="#">PHP基础教程01</a></li> <li><a href="#">PHP基础教程02</a></li> <li><a href="#">PHP基础教程03</a></li> <li><a href="#">PHP基础教程04</a></li> </ul> </li> <li> <div class="header"><span class="txt">五、IOS基础教程</span> <span class="arrow"></span></div> <ul class="menu-two"> <li class="firstChild"><a href="#">IOS基础教程01</a></li> <li><a href="#">IOS基础教程02</a></li> <li><a href="#">IOS基础教程03</a></li> <li><a href="#">IOS基础教程04</a></li> </ul> </li> </ul></div><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script> $(document).ready(function () { var aMenuOneLi = $(".menu-one > li"); var aMenuTwo = $(".menu-two"); $(".menu-one > li > .header").each(function (i) { $(this).click(function(){ if ($(aMenuTwo[i]).css("display") == "block") { $(aMenuTwo[i]).slideUp(300); $(aMenuOneLi[i]).removeClass("menu-show") }else{ for (var j = 0; j < aMenuTwo.length; j++) { $(aMenuTwo[j]).slideUp(300); $(aMenuOneLi[j]).removeClass("menu-show"); } $(aMenuTwo[i]).slideDown(300); $(aMenuOneLi[i]).addClass("menu-show") } }); }); });</script></body></html>
2.效果
阅读原文：原文链接
该文章在 2025/7/18 10:26:11 编辑过
400 186 1886
