zoukankan      html  css  js  c++  java
  • JavaScript(14):实现jQuery的click绑定及链式编程

        示例代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>隐藏菜单栏</title>
        <!--主要为了实现jQuery的click绑定及链式编程-->
        <style>
            .menu{
                height: 30px;
                 100px;
                background-color: #dbffb7;
                border: 1px solid;
            }
            .content{
                height: 100px;
                 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>

  • 相关阅读:
    Balanced Binary Tree
    Swap Nodes in Pairs
    Reverse Nodes in k-Group
    Reverse Linked List II
    Remove Nth Node From End of List
    Remove Duplicates from Sorted List II
    Remove Duplicates from Sorted List
    Partition List
    Merge Two Sorted Lists
    【Yii2.0】1.2 Apache检查配置文件语法
  • 原文地址:https://www.cnblogs.com/wangchongzhangdan/p/9409623.html
Copyright © 2011-2022 走看看