运用jQuery框架实现信息折叠卡片的效果

最新推荐文章于 2023-07-31 12:17:12 发布

长得丑就要多读书

最新推荐文章于 2023-07-31 12:17:12 发布

阅读量926

点赞数

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/qq_40523659/article/details/121427444

版权

1.效果分析

首先展示娱乐新闻第一项，其余新闻内容隐藏；给每个标题绑定单击事件；单机某标题后对其进行完整显示，同时其余新闻内容隐藏。

2.代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #eee;
        }
        .container{
            width: 600px;
            margin: 30px auto;
            border: 1px solid black;
        }
        .container ul{
            list-style: none;
        }
        .container ul li{
            border-bottom: 1px solid orange;
        }
        .container ul li h3{
            text-align: center;
            font-size: 18px;
        }
        .container ul li p{
            display: none;
        }
        .container ul li p.cur{
            display: block;
        }
    </style>
    <script type="text/javascript" src="./jQuery-3.5.1.min.js"></script>
</head>
<body>
<div class="container">
    <ul>
        <li>
            <h3>罗翔，真男人</h3>
            <p class="cur">罗翔捐赠37万，是早在一年半以前其“出道”之际就公开宣示过的决定。
                2020年3月27日，罗翔开通“激励计划”并发消息称，将通过该计划的收入所得均捐给儿童希望救助基金会</p>
        </li>
        <li>
            <h3>第十六届中国长春电影节确定开幕时间 冰雪成关键</h3>
            <p>电影节期间，将举办开闭幕式、电影评奖、电影展映、电影论坛、致敬“摇篮”、群众文化六大单元主体活动。</p>
        </li>
        <li>
            <h3>新派国剧《瞄准》再“上星”，黄轩陈赫展开“神枪手”</h3>
            <p>由五百、别克执导，黄轩、陈赫、杨采钰、李溪芮、张洪睿领衔主演的高密度狙击动作国剧《瞄准》
                将在黑龙江卫视上星播出。</p>
        </li>
        <li>
            <h3>郑恺退出火凤祥 明星餐厅难出“明星”</h3>
            <p>明星跨界开餐厅已经是常事，但“翻车”案例层出不穷。
                近日，火锅品牌火凤祥所属公司发生工商变更，艺人郑恺所持股公司等退出。</p>
        </li>
    </ul>
</div>

</body>
</html>
<script type="text/javascript">
    //给新闻标题绑定单击事件
    $('h3').click(function(){
        $(this).siblings().slideDown(500).parent().siblings().children('p').slideUp();

    });
</script>

3.最终效果