如何修改脚本实现页面加载时折叠面板默认收起
问题描述
我有一个点击Font Awesome图标展开描述内容的脚本,但当前站点加载时该内容默认处于展开状态。我需要实现站点加载时内容收起,点击按钮才展开的效果,尝试多种方法后仍未成功。
相关截图:
原代码如下:
<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
相关产品推荐
相关产品推荐




