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>

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

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试

关闭