【jQuery】超简单的点击弹出或隐藏操作

最新推荐文章于 2022-09-23 19:25:52 发布

原创最新推荐文章于 2022-09-23 19:25:52 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个简单的jQuery示例，通过点击按钮显示或隐藏一个弹出窗口。该功能利用了jQuery的选择器和事件处理机制。

这里写图片描述

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="dw">
        <input type="button" value="点我"/>
    </div>
    <div class="out" style="display: none">
        <h1>嘿嘿 我出来了</h1>
    </div>
    <script src="../js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(e){
            /*点我 弹出内容*/
            $('.dw').click(function(){
                if($('.out').is(':hidden')){
                    $('.out').show();
                }else{
                    $('.out').hide();
                }
            });
        });
    </script>
</body>
</html>