点击自己内容显示和隐藏

最新推荐文章于 2023-06-14 10:34:45 发布

含笑一过

最新推荐文章于 2023-06-14 10:34:45 发布

阅读量1.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u013630488/article/details/50063615

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

                    **点击自己内容显示和隐藏**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击自己内容显示和隐藏</title>
    <link rel="stylesheet" type="text/css" href="../reset.css">
    <script type="text/javascript" src="../jquery-1.9.1.js"></script>
    <style type="text/css">
    #content{width:800px;margin:30px auto;}
    .title_name{background: #ccc;height: 30px;line-height: 30px;text-indent: 2em;}
    .content{display: none;background: #fff;padding: 5px;}
    .showhide{border:1px solid #ccc;margin-bottom: 1px;}
    </style>
    <script type="text/javascript">
        $(function(){
            $(".title_name").click(function(){
                var $Scontent = $(this).next();
                if($Scontent.is(":visible")){
                    $Scontent.hide();
                }else{
                    $Scontent.show();
                }
            })
        })
    </script>
</head>
<body>
    <div id="content">
        <div class="showhide">
            <h2 class="title_name">什么是网贷？</h2>
            <p class="content">
                爱屋吉屋于2014年3月成立，是全国第一家线上线下整合的专业房地产中介公司。一年来，我们已在北、上、广、深全面铺开，为业主、客户提供最专业的二手房、租房中介服务。常在春晚上和大家见面的蔡明阿姨既是我们的客户，也是我们的代言人。
            </p>
        </div>
        <div class="showhide">
            <h2 class="title_name">什么是股票？</h2>
            <p class="content">
                爱屋吉屋于2014年3月成立，是全国第一家线上线下整合的专业房地产中介公司。一年来，我们已在北、上、广、深全面铺开，为业主、客户提供最专业的二手房、租房中介服务。常在春晚上和大家见面的蔡明阿姨既是我们的客户，也是我们的代言人。
            </p>
        </div>
        <div class="showhide">
            <h2 class="title_name">什么是基金？</h2>
            <p class="content">
                爱屋吉屋于2014年3月成立，是全国第一家线上线下整合的专业房地产中介公司。一年来，我们已在北、上、广、深全面铺开，为业主、客户提供最专业的二手房、租房中介服务。常在春晚上和大家见面的蔡明阿姨既是我们的客户，也是我们的代言人。
            </p>
        </div>
    </div>
</body>
</html>

效果如下：
这里写图片描述
下载地址：http://pan.baidu.com/s/1eQfQPfs

含笑一过

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击自己内容显示和隐藏

**点击自己内容显示和隐藏**<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击自己内容显示和隐藏</title> <link rel="stylesheet" type="text/css" href="../reset.css"> <script type="text/
复制链接

扫一扫

专栏目录