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

Accordion标签异常:点击第一个标签第二个自动隐藏求助

Accordion组件异常问题求助
  • 异常表现:点击第一个Accordion标签展开时,第二个标签自动隐藏
  • 页面地址:https://www.lunaandsolis.com/products/plant-based-omega-3-liquid-drops,访问密码:Eastoft2021
  • 已尝试方案:使用JavaScript代码控制显示与隐藏,但问题仍未解决

相关代码

Liquid模板代码(Accordion结构)

{% for block in section.blocks %}
          <div class="product__accordion accordion " style="display: block; ">
            <details id="Details-{{ block.id }}">
              <summary>
                <div class="summary__title">
                  <h2 class="h4 accordion__title inline-richtext">
                    {{ block.settings.title }}
                  </h2>
                </div>
                <svg aria-hidden="true" focusable="false" viewBox="0 0 10 10" class="icon icon-caret" style="width: 15px;">
                <rect x="1" y="4" width="8" height="2" fill="currentColor"></rect>
                <rect x="4" y="1" width="2" height="8" fill="currentColor"></rect>
              </svg>


              </summary>
              <div class="accordion__content rte" id="ProductAccordion-fda6e785-4c70-4aa3-b420-375a5ffe10d2-template--16791374168298__main">
              {{ block.settings.content }}
            </div>
            </details>
          </div>
            {% endfor %}

CSS样式代码

.accordion summary {
  display: flex;
  align-items: center;
  position: relative;
  line-height: 1;
  padding: 0.5rem 0;
}

.accordion .summary__title {
  display: flex;
  flex: 1;
}

.accordion .summary__title + .icon-caret {
  height: 15px;
}
.accordion + .accordion {
  margin-top: 0;
  border-top: none;
}

.accordion__title {
  display: inline-block;
  max-width: calc(100% - 6rem);
  min-height: 1.6rem;
  margin: 0;
  word-break: break-word;
  font-size:16px!important;
  font-weight:400!important;
}

.accordion .icon-accordion {
  align-self: center;
  fill: rgb(var(--color-foreground));
  height: 30px;
  margin-right: 10px;
  width: 20px;
}

.accordion details[open] > summary .icon-caret {
  transform: rotate(135deg);
}

.accordion__content {
  margin-bottom: 1.5rem;
  word-break: break-word;
  overflow-x: auto;
  padding: 0 0.6rem;
}

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.07.11 23:08:32