Shopify Dawn模板底部菜单开启手机可折叠模式

样式

<style>
@media (max-width:749px) {
.footer-block__details-content {
	margin-bottom:2rem;
}
.footer-block--menu h2 {
	cursor:pointer;
}
.footer-block--menu ul {
	max-height:0;
	overflow:hidden;
	transition:max-height 0.5s ease-out;
}
.footer-block--menu h2:after {
	content:"+";
	width:25px;
	float:right;
}
.footer-block--menu.open h2:after {
	content:'-';
	width:25px;
}
.footer-block--menu.open ul {
	height:auto;
	max-height:900px;
	transition:max-height 0.5s ease-in !important;
}
}
</style>

脚本

<script>
document.addEventListener("DOMContentLoaded",
  function() {
    const footerWraper = document.querySelector('.footer__blocks-wrapper');
    const footerHeading = footerWraper.querySelectorAll('.footer-block__heading');

    if (footerHeading.length > 0) {
      footerHeading.forEach(function(collapFooter) {
        collapFooter.addEventListener('click',
        function() {
          const parentBlock = collapFooter.closest(".footer-block--menu");
          if (parentBlock) {
            parentBlock.classList.toggle("open");
          }
        });
      });
    }
  });
</script>