实现展开收缩效果

贝塔贝卡贝

于 2023-02-11 10:42:21 发布

阅读量230

点赞数

CC 4.0 BY-SA版权

文章标签： css css3 html

本文链接：https://blog.csdn.net/Kiruthika/article/details/128981071

这段代码展示了如何使用HTML、CSS和JavaScript（jQuery库）创建一个可折叠的分享说明部分。点击‘展开’按钮，内容区域的高度会从固定到自动切换，允许用户查看隐藏的内容列表。

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

在这里插入图片描述

在这里插入图片描述
HTML:

<div class="wrapper">
    <div class="tab">分享说明</div>
    <p class="open-ctrl" οnclick="openCtrl()">展开</p>
    <ul class="content">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

CSS:


.tab {
    width: 150px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #8c0000;
    position: relative;
    border-bottom: 2px solid #6f8aed;

}

.tab:before {
    width: 10px;
    display: block;
    content: " ";
    background-color: #FFF;
    position: absolute;
    right: -2px;
    top: -2px;
}

.tab:after {
    display: block;
    content: " ";
    width: 100px;
    height: 53px;
    top: -1px;
    background-color: #FFF;
    position: absolute;
    right: -27px;
    transform: skewX(-45deg);
    -ms-transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    border-right: 2px solid #6f8aed;
    z-index: -1;
}

.wrapper {
    width: 100%;
    border: 1px solid #e6e6e6;
    display: flex;
    position: relative;
    margin-top: 30px;
}

.content{
    width: 100%;
    height: 50px;
    overflow: hidden;
    border-top: 2px solid #6f8aed;
    margin: -1px 0 0 52px;
    box-sizing: border-box;
    padding: 10px;
}

.content > li {
    line-height: 2;
}

.open-ctrl{
    position: absolute;
    top: 0;
    right: 20px;
    color: #008c8c;
    cursor: pointer;
}

JS：

<script src="./js/jquery-1.4.4.min.js"></script>
<script>
    let isopen;
    function openCtrl(){
        isopen = !isopen;
        $(".open-ctrl").html(`${isopen ? '收缩' : '展开'}`);
        $(".content").css({height:`${isopen ? 'auto' : '50px'}`,overflow:`${isopen ? 'auto' : 'hidden'}`})
    }
</script>