初始化为全部隐藏
点第一个，显示第一个所隐藏的内容
当点第二个的时候，第一个的内容隐藏，第二个栏目的内容显示，以此类推
下面是代码部分
<!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> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
</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> $(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>
第二种方法（ps:跟第一个相比第二个比较简陋，但也是能用的）
<ul> <li class=""> <a href="javascript:;"> <img src="images/p6-1.png" ><span>我的资料</span> </a> <ul> <li> <a href="wodeziliao.html"> <span>我的资料</span> </a> </li> </ul> </li> <li class=""> <a href="javascript:;"> <img src="images/p6-2.png" ><span>我的发布</span> </a> <ul> <li><a href="wodefabu.html"><span>我的发布</span></a></li> <li><a href="wodefabu.html"><span>我的发布</span></a></li> <li><a href="wodefabu.html"><span>我的发布</span></a></li> <li><a href="wodefabu.html"><span>我的发布</span></a></li> </ul> </li> <li class=""> <a href="javascript:;"> <img src="images/p6-3.png" ><span>我的收藏</span> </a> <ul> <li><a href="wodeshoucang.html"><span>我的收藏</span></a></li> <li><a href="wodeshoucang.html"><span>我的收藏</span></a></li> <li><a href="wodeshoucang.html"><span>我的收藏</span></a></li> <li><a href="wodeshoucang.html"><span>我的收藏</span></a></li> </ul> </li> <li class=""> <a href="javascript:;"> <img src="images/p6-4.png" ><span>我的预约</span> </a> <ul> <li><a href=""><span>我的预约</span></a></li> <li><a href=""><span>我的预约</span></a></li> <li><a href=""><span>我的预约</span></a></li> <li><a href=""><span>我的预约</span></a></li> </ul> </li> <li class=""> <a href="javascript:;"> <img src="images/p6-5.png" ><span>我的订单</span> </a> <ul> <li><a href=""><span>我的订单</span></a></li> <li><a href=""><span>我的订单</span></a></li> <li><a href=""><span>我的订单</span></a></li> <li><a href=""><span>我的订单</span></a></li> </ul> </li> <li class=""> <a href="xiugaimima.html"> <img src="images/p6-6.png" ><span>修改密码</span> </a> </li> <li class=""> <a href=""> <img src="images/p6-7.png" ><span>退出账号</span> </a> </li></ul>
$(".Ep_my_data li").click(function(){ $(this).toggleClass("ssde"); $(this).children(".Ep_my_data li ul").slideToggle("slow");});
时间： 2025-01-02 15:31:11