Question

我正在尝试将2层手风琴转变为3层手风琴，但是此代码非常令人困惑。任何援助将不胜感激。单击第一层和第二层的功能完全相同，这显然与命名有关，但是我似乎无法正确理解。

<div class="m-accordion m-accordion--bordered" id="m_accordion_2" role="tablist">
    <div class="m-accordion__item">
        <div class="m-accordion__item-head" role="tab" id="m_accordion_2_item_1_head" data-toggle="collapse" href="#m_accordion_2_item_1_body" aria-expanded="true">
            <span class="m-accordion__item-icon">
                <i class="fa flaticon-user-ok"></i>
            </span>
            <span class="m-accordion__item-title">
                First Tier
            </span>
            <span class="m-accordion__item-mode"></span>
        </div>
    <div class="m-accordion__item-body collapse show" id="m_accordion_2_item_1_body" role="tabpanel" aria-labelledby="m_accordion_2_item_1_head" data-parent="#m_accordion_2" style="">
            <div class="m-accordion__item-content">
        <div class="m-accordion__item-head" role="tab" id="m_accordion_2_item_1_head" data-toggle="collapse" href="#m_accordion_2_item_1_body" aria-expanded="true">
            <span class="m-accordion__item-icon">
                <i class="fa flaticon-user-ok"></i>
            </span>
            <span class="m-accordion__item-title">
                Second Tier
            </span>
            <span class="m-accordion__item-mode"></span>
        </div>
            </div>
        </div>
        <div class="m-accordion__item-body collapse show" id="m_accordion_2_item_1_body" role="tabpanel" aria-labelledby="m_accordion_2_item_1_head" data-parent="#m_accordion_2" style="">
            <div class="m-accordion__item-content">
                <p>
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
                </p>
            </div>
        </div>
    </div>
</div>

这是仅适用于2层的原始代码：

<div class="m-accordion m-accordion--bordered" id="m_accordion_2" role="tablist">
    <div class="m-accordion__item">
        <div class="m-accordion__item-head" role="tab" id="m_accordion_2_item_1_head" data-toggle="collapse" href="#m_accordion_2_item_1_body" aria-expanded="true">
            <span class="m-accordion__item-icon">
                <i class="fa flaticon-user-ok"></i>
            </span>
            <span class="m-accordion__item-title">
                When an unknown printer took
            </span>
            <span class="m-accordion__item-mode"></span>
        </div>
        <div class="m-accordion__item-body collapse show" id="m_accordion_2_item_1_body" role="tabpanel" aria-labelledby="m_accordion_2_item_1_head" data-parent="#m_accordion_2" style="">
            <div class="m-accordion__item-content">
                <p>
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
                </p>
            </div>
        </div>
    </div>
</div>

Answer 1

我知道您不是要在此处放置代码图片，但这是可视化此问题的最佳方法。

基本上，每个可扩展部分都有2个属性，需要在标题（始终可见的部分）和正文（单击标题时扩展的部分）之间对齐。面板之间的其他所有内容都可以保持不变，但是标题和正文之间的这两个属性需要匹配，并且每个折叠面板都必须唯一。

所以您可以有3个面板，其ID为：

面板1：id="m_accordion_2_item_1_body"

面板2：id="m_accordion_2_item_2_body"

面板3：id="m_accordion_2_item_3_body"

请仔细阅读引导文档，因为您正在使用数据属性来控制此操作。 https://getbootstrap.com/docs/4.1/components/collapse/#via-data-attributes

如何将2层手风琴变成3层手风琴

1 个答案: