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
相关产品推荐
相关产品推荐

