左侧菜单收缩的实现（包括，筛选器，addclass、removeclass、绑定事件，链式编程） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .head{
            background-color: #2f96b4;
            color: red;
        }
        .content{
            min-height: 80px;
            background-color: green;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height: 400px;width: 200px;border: 1px solid #DDDDDD">
        <div class="item">
            <div class="head">标题1</div>
            <div id="i1" class="content hide">内容1</div>
        </div>
        <div class="item">
            <div class="head">标题2</div>
            <div id="i2" class="content hide">内容1</div>
        </div>
        <div class="item">
            <div class="head">标题3</div>
            <div id="i3" class="content hide">内容1</div>
        </div>
        <div class="item">
            <div class="head">标题4</div>
            <div id="i4" class="content hide">内容1</div>
        </div>
    </div>
<script src="jquery.js"></script>
<script>
    $('.head').click(function () {
        $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
        // 当前点击的标签 $(this)
            // 获取某个标签的下一个标签
            // 获取某个标签的父标签
            // 获取所有的兄弟标签
            // 添加样式和移除样式
            // $('.i1').addClass('hide')
            // $('#i1').removeClass('hide')
            // var v = $("this + div");
            // $("label + input")
            // console.log(v);
            //
            // $("afsldkfja;skjdf;aksdjf")

            // 筛选器
            /*
            $(this).next()      下一个
            $(this).prev()      上一个
            $(this).parent()    父
            $(this).children()  孩子
            $('#i1').siblings() 兄弟
            $('#i1').find('#i1') 子子孙孙中查找
            // . . .
            //
            $('#i1').addClass(..)
            $('#i1').removeClass(..)
            */

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


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


    })
</script>
</body>
</html>

　　

posted @ 2018-04-25 00:41  梦中琴歌  阅读(362)  评论(0)    收藏  举报