JavaScript（14）：实现jQuery的click绑定及链式编程

仲永要加油呀

于 2018-06-14 17:29:40 发布

阅读量147

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_31655771/article/details/80695933

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个使用HTML和jQuery实现的简单菜单栏隐藏显示效果。通过点击菜单项来切换对应内容的显示与隐藏状态，实现这一功能的主要技术为jQuery的click事件绑定及链式编程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例代码：

<!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>