删选器

1.筛选器做左侧菜单实例

筛选器如下：

            //当前点击的标签 $(this);
            //获取某个标签的下一个标签
            //获取某个标签的父标签，
            //获取父亲的所有兄弟标签，
            //添加样式移除样式
            //$('.i1').addClass('hide')
            //$('.i1').removeClass('hide')
            //var v=$(this+"div") this+"div"组合有问题
            //筛选器，在所有选到的标签中再进行一次筛选
            $(this).next() 下一个
            $(this).prev() 上一个
            $(this).parent() 父亲
            $(this).children() 孩子
            $(this).siblings() 兄弟
　　　　　　　$('#i1').find('#i1') 子子孙孙中查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color:blue;
            color:white;
        }
        .content{
            min-height:50px;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
    <div style="height:400px;width:200px;border-color:1px solid #dddddd">
        <div class="item">
            <div class="header">标题1</div>
            <div class="content">内容</div>
        </div>
        <div class="item">
            <div class="header">标题2</div>
            <div class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题3</div>
            <div class="content hide">内容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function(){
            $(this).next().removeClass('hide');
            $(this).parent().siblings().find('.content').addClass('hide');
        })
    </script>
</body>
</html>

两行可以并成一行,jquery 支持链式编程。

$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

posted on 2017-09-01 17:03 momo8238 阅读(202) 评论(0) 编辑收藏举报