day17--06章节--筛选器（实现菜单栏优化，点击某个标题，其内容显示；其他标题的内容隐藏）

1、jquery的筛选器

筛选器：在选择器选择到的所有的基础上在选择一次

　          $(this).next()      下一个
            $(this).prev()      上一个
            $(this).parent()    父
            $(this).children()  孩子
            $('#i1').siblings() 兄弟
            $('#i1').find('#i1') 子子孙孙中查找

　　　　     $('#i1').addClass('hide')   移除某个class属性
            $('#i1').removeClass('hide') 增加某个class属性
　　　　　　　　

            链式编程
            $(...).click(function(){
               this..
            })

2、实例如下：

以之前的后台管理页面左侧菜单为例;

html代码如下：

      <div style=" 400px;height: 400px;border: 1px solid #dddddd;">
            <div class="item">
                <div class="header">标题一</div>
                <div id="i1" class="content hide">内容</div>
            </div>
            <div class="item">
                <div class="header">标题二</div>
                <div class="content hide">内容</div>
            </div>
            <div class="item">
                <div class="header">标题三</div>
                <div class="content hide">内容</div>
            </div>
        </div>

css布局如下：

       <style>
            .header{
                background-color: black;
                color: wheat;
            }
            .content{
                min-height: 50px;
            }
            .hide{
                display: none;
            }
        </style>

jquery实现如下：

       <script src="jquery-1.12.4.js"></script>
        <script>
            $('.header').click(function(){
                $(this).next().removeClass('hide');
                $(this).parent().siblings().find('.content').addClass('hide');
                // $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');    //实现的第二种方法，与上面方法相同；jquery可以无限...下去
            })
        </script>