JavaScript(14):实现jQuery的click绑定及链式编程

    示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏菜单栏</title>
    <!--主要为了实现jQuery的click绑定及链式编程-->
    <style>
        .menu{
            height: 30px;
            width: 100px;
            background-color: #dbffb7;
            border: 1px solid;
        }
        .content{
            height: 100px;
            width: 100px;
            border: 1px solid;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <div class="menu">菜单一</div>
            <div class="content">内容一</div>
        </div>
        <div>
            <div class="menu">菜单二</div>
            <div class="content hide">内容二</div>
        </div>
        <div>
            <div class="menu">菜单三</div>
            <div class="content hide">内容三</div>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu').click(function () {
//            $(this).next().removeClass('hide').parent().siblings().children().first().addClass('hide');
//            上一句是错的,因为first是得到所有获取标签中的第一个标签
            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
        });
    </script>
</body>
</html>

阅读更多
个人分类: JavaScript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭