首页 新闻 搜索 专区 学院

[求助]列表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请大家指点一二,谢谢。

wanglan的主页 wanglan | 初学一级 | 园豆:156
提问于:2012-09-06 18:01
< >
分享
最佳答案
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>

演示:http://jsfiddle.net/yeECU/

收获园豆:10
artwl | 专家六级 |园豆:16526 | 2012-09-06 18:36

做的很好,多谢这位老师,能再帮我一下就好了,就差最关键的一步了,主要的问题是我不知道下面的效果怎么写,比如我选完了图书分类,我带你下面的漫画或电影,上面的

<tr> <td>图书</td><td>杂志</td> </tr>又恢复成原来的样子,而且比如点过了图书分类,我点击它右边的杂志分类,那下面的tabCon就应该出现杂志的子分类

<tr class="tabCon"> <td colspan="2">杂志<span>青春 励志 言情</span></td> </tr>就是这种样子的

wanglan | 园豆:156 (初学一级) | 2012-09-06 22:09
其他回答(2)
0

是个菜单吗?

chenping2008 | 园豆:9836 (大侠五级) | 2012-09-06 20:53

是个分类列表

支持(0) 反对(0) wanglan | 园豆:156 (初学一级) | 2012-09-06 21:59

@wanglan: 能算个菜单吧?

支持(0) 反对(0) chenping2008 | 园豆:9836 (大侠五级) | 2012-09-07 09:07
0

你用jq  ,反正就是反复的玩  show  和hidden  方法 

架构师修行之路 | 园豆:322 (菜鸟二级) | 2012-09-07 15:16
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册