[求助]列表li里的a点击后，所在行的li显示隐藏问题？
0
悬赏园豆：10
[已解决问题]
解决于 2012-09-09 07:11
有这么一个需求，有几行li列表，每行两个a标签元素，也就是每行两个分类，当点击其中一个分类（a）时，这一行的a元素（也就是这两个a）隐藏，同时显示tabCon(也就是黄色的部分)，tabCon是刚才所属分类的子分类，比如选择的a元素是“图书”，那tabCon显示的是图书下的子分类，当点击其他别的行的li时，tabCon隐藏，之前选择过的分类（a）恢复显示。
这是刚开始时的图片：
点击分类a出现的相应子分类tabCon：
如何写jquery或js请大家指点一二，谢谢。
最佳答案
0
写了个Demo，不知道是不是你要的效果:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> New Document </title> <style type="text/css"> #tb{ border-collapse:collapse; background:#EEE; cursor:pointer; } #tb td{ border:1px solid #000; font-size:16px; font-weight:bolder; color:#880000; padding:5px 40px; } .hide{ display:none; } .tabCon{ display:none; background:#F60; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script> $(function(){ $("#tb tr").each(function(index,item){ if(index % 2 === 0){ $(this).bind("click",function(){ $(".hide").removeAttr("class"); $(".tabCon").hide(); $(this).attr("class","hide").next("tr").show(); }); } }); }); </script> </head> <body> <table id="tb"> <tr> <td>图书</td><td>杂志</td> </tr> <tr class="tabCon"> <td colspan="2">图书<span>医药 教育 小说</span></td> </tr> <tr> <td>漫画</td><td>听书</td> </tr> <tr class="tabCon"> <td colspan="2">漫画<span>漫画 漫画 漫画</span></td> </tr> <tr> <td>电影</td><td>音乐</td> </tr> <tr class="tabCon"> <td colspan="2">电影<span>电影 电影 电影</span></td> </tr> </table> </body> </html>
收获园豆：10
做的很好，多谢这位老师，能再帮我一下就好了，就差最关键的一步了，主要的问题是我不知道下面的效果怎么写，比如我选完了图书分类，我带你下面的漫画或电影，上面的
<tr> <td>图书</td><td>杂志</td> </tr>又恢复成原来的样子，而且比如点过了图书分类，我点击它右边的杂志分类，那下面的tabCon就应该出现杂志的子分类
<tr class="tabCon"> <td colspan="2">杂志<span>青春 励志 言情</span></td> </tr>就是这种样子的
其他回答(2)
0
是个菜单吗？
是个分类列表
@wanglan: 能算个菜单吧？
0
你用jq ，反正就是反复的玩 show 和hidden 方法
