废鸡程序员 2022-07-21 10:14 采纳率: 86%
浏览 76
已结题

我点击展开想加个过渡效果，不知道怎么加！

我点击展开收起的时候想加个过渡效果，不知道怎么加！
我点击展开收起的时候想加个过渡效果，不知道怎么加！

img

  • 写回答

4条回答 默认 最新

  • 土拨鼠1号 2022-07-21 10:42
    关注
    <!DOCTYPE html>
<html>
<head>
    <title>展开动画</title>
    <style type="text/css">
        .page{
            width: 200px;
            padding: 10px 20px;
            border: 1px solid #eee;
        }
        .container {
            overflow: hidden;
        }
        .container > .options{
            transition: all .5s;
            max-height: 0;
        }
        .container > .unfold{
            max-height: 150px;
        }
        .container > .btn{
            color: #4C98F7;
            cursor: pointer;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="container">
            <div class="btn" onclick="operate(this)" unfold="1">展开</div>
            <div class="options">
                <div class="option">选项1</div>
                <div class="option">选项2</div>
                <div class="option">选项3</div>
                <div class="option">选项4</div>
                <div class="option">选项5</div>
                <div class="option">选项6</div>
                <div class="option">选项7</div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    function operate(btn){
        const optionsNode = document.querySelector(".container > .options");
        const unfold = btn.getAttribute("unfold");
        if(unfold && unfold==="1"){
            btn.innerText = "收缩";
            optionsNode.classList.add("unfold");
        }else{
            btn.innerText = "展开";
            optionsNode.classList.remove("unfold");
        }
        btn.setAttribute("unfold", unfold === "0" ? "1" : "0");
    }
</script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 7月29日
  • 已采纳回答 7月21日
  • 创建了问题 7月21日

悬赏问题

  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 下图接收小电路，谁知道原理
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测
  • ¥15 ETLCloud 处理json多层级问题