You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何修改脚本实现页面加载时折叠面板默认收起

问题描述

我有一个点击Font Awesome图标展开描述内容的脚本,但当前站点加载时该内容默认处于展开状态。我需要实现站点加载时内容收起,点击按钮才展开的效果,尝试多种方法后仍未成功。

相关截图:

  • FA-ICON按钮
  • 当前页面加载状态
  • 期望的页面加载状态

原代码如下:

<script>
    function convertDate(e) {
        var t, o = new Date(e);
        return [(t = o.getDate(), t < 10 ? "0" + t : t)].join("/")
    }
    function getMesExtenso(e) {
        var t = new Array(12);
        return t[0] = "janeiro", t[1] = "fevereiro", t[2] = "março", t[3] = "abril", t[4] = "maio", t[5] = "junho", t[6] = "julho", t[7] = "agosto", t[8] = "setembro", t[9] = "outubro", t[10] = "novembro", t[11] = "dezembro", t[e]
    }
    jQuery(document).ready(function(e) {
        var t = new Date,
            o = t.setDate(t.getDate() - 11),
            n = t.setDate(t.getDate() + 18),
            r = getMesExtenso(t.getMonth());
        if (convertDate(o) > convertDate(n)) var a = "<strong>" + convertDate(n) + "</strong> e <strong>" + convertDate(o) + " de " + r + "</strong>";
        else {
            if (null == (s = getMesExtenso(t.getMonth() + 1))) var s = getMesExtenso(t.getMonth() - 11);
            a = "<strong>" + convertDate(n) + " de " + r + "</strong> e <strong>" + convertDate(o) + " de " + s + "</strong>"
        }
        e.getJSON("https://wtfismyip.com/json", function(t) {
            var o = (t = t.YourFuckingLocation).replace(", Brazil", "");
            e(".custom-address").html(" <span class='text-shipping' style='color: #404040; font-family: Roboto,sans-serif; font-weight: 500; color: #727272; text-transform: uppercase; font-size: 12px; font-weight: bold;'>Entrega via Correios© <span class='text-shipping d-block' style='margin-top: -1px; font-size:9.3px;'><span style='color:#59c00b; '>FRETE GRÁTIS</span> PARA " + o + " e região</font></strong></span> ");
            e(".shipping-preview-loading").hide();
            e("#deliverygarante").html("Estimada entre " + a + "."), e(".shipping-preview-loading").hide();
        })
        
        $(".shipping-preview-line").click(function () {
  
      
            $("#content-collapse").toggle( "slow", function() {
            // Animation complete.
        
        
            var arrow_mode = $("#arrow--delivery").attr("data-open");
      
            if($("#arrow--delivery").attr("data-open") == "false") {
                
                $("#arrow--delivery").attr("data-open", "true");
          
                $("#arrow--delivery").html('<i class="fas fa-angle-down"></i>');
            
            }else if($("#arrow--delivery").attr("data-open") == "true") {
                $("#arrow--delivery").attr("data-open", "false");
                $("#arrow--delivery").html('<i class="fas fa-angle-right"></i>');
            }
          
                
            
            console.log("Animation completed");
            });
        });
    });
</script>
解决方案

问题根源是当前代码仅实现了点击切换的逻辑,没有初始化默认收起状态。只需在页面DOM加载完成后,手动设置内容为隐藏状态,并同步箭头的初始状态:

  • 隐藏#content-collapse元素
  • 将箭头的data-open属性设为false,并设置图标为fa-angle-right
修改后的代码
<script>
    function convertDate(e) {
        var t, o = new Date(e);
        return [(t = o.getDate(), t < 10 ? "0" + t : t)].join("/")
    }
    function getMesExtenso(e) {
        var t = new Array(12);
        return t[0] = "janeiro", t[1] = "fevereiro", t[2] = "março", t[3] = "abril", t[4] = "maio", t[5] = "junho", t[6] = "julho", t[7] = "agosto", t[8] = "setembro", t[9] = "outubro", t[10] = "novembro", t[11] = "dezembro", t[e]
    }
    jQuery(document).ready(function(e) {
        var t = new Date,
            o = t.setDate(t.getDate() - 11),
            n = t.setDate(t.getDate() + 18),
            r = getMesExtenso(t.getMonth());
        if (convertDate(o) > convertDate(n)) var a = "<strong>" + convertDate(n) + "</strong> e <strong>" + convertDate(o) + " de " + r + "</strong>";
        else {
            if (null == (s = getMesExtenso(t.getMonth() + 1))) var s = getMesExtenso(t.getMonth() - 11);
            a = "<strong>" + convertDate(n) + " de " + r + "</strong> e <strong>" + convertDate(o) + " de " + s + "</strong>"
        }
        e.getJSON("https://wtfismyip.com/json", function(t) {
            var o = (t = t.YourFuckingLocation).replace(", Brazil", "");
            e(".custom-address").html(" <span class='text-shipping' style='color: #404040; font-family: Roboto,sans-serif; font-weight: 500; color: #727272; text-transform: uppercase; font-size: 12px; font-weight: bold;'>Entrega via Correios© <span class='text-shipping d-block' style='margin-top: -1px; font-size:9.3px;'><span style='color:#59c00b; '>FRETE GRÁTIS</span> PARA " + o + " e região</font></strong></span> ");
            e(".shipping-preview-loading").hide();
            e("#deliverygarante").html("Estimada entre " + a + "."), e(".shipping-preview-loading").hide();
        })

        // 初始化默认收起状态
        $("#content-collapse").hide();
        $("#arrow--delivery").attr("data-open", "false").html('<i class="fas fa-angle-right"></i>');
        
        $(".shipping-preview-line").click(function () {
  
      
            $("#content-collapse").toggle( "slow", function() {
            // Animation complete.
        
        
            var arrow_mode = $("#arrow--delivery").attr("data-open");
      
            if($("#arrow--delivery").attr("data-open") == "false") {
                
                $("#arrow--delivery").attr("data-open", "true");
          
                $("#arrow--delivery").html('<i class="fas fa-angle-down"></i>');
            
            }else if($("#arrow--delivery").attr("data-open") == "true") {
                $("#arrow--delivery").attr("data-open", "false");
                $("#arrow--delivery").html('<i class="fas fa-angle-right"></i>');
            }
          
                
            
            console.log("Animation completed");
            });
        });
    });
</script>

内容的提问来源于stack exchange,提问作者Matheus Ribeiro

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.05 02:55:18