在 if-else 条件下，额外的 div 被添加到明显的 html 标记中

Question

如果是 html 标记，则会添加一个额外的 div；当第二个块没有执行时。作者对话框中基于复选框的三个条件。当第二个复选框没有被选中时；那么第一个和第三个条件为真，第二个条件为假；所以第二个视觉块不应该被执行。但它在标记中添加了一个额外的 div ；这样具有“容器选项卡容器”类的 div 就会在两者之间关闭。

--请在视觉标记下方找到

<sly data-sly-test.condition1="${properties.checkbox1}">
<sly data-sly-test.condition2="${properties.checkbox2}">
<sly data-sly-test.condition3="${properties.checkbox3}">

<div class="tabs-body">
            <div class="container tabs-container">

                <!--/* First condition */-->
                <sly data-sly-test="${condition1}">
                    <div class="tabs-body-item" data-tab-content-id="data-tab-content-id1">

                    </div>
                </sly>                

                <!--/* Second condition */-->
                <sly data-sly-test="${condition2}">
                    <sly data-sly-test="${condition1}">
                    <div class="tabs-body-item" data-tab-content-id="data-tab-content-id2">
                    </sly>
                    <sly data-sly-test="${!condition1}">
                    <div class="tabs-body-item is-active" data-tab-content-id="data-tab-content-id2">
                    </sly>
                    </div>
                </sly>

                <!--/* Third condition */-->
                <sly data-sly-test="${condition3}">
                    <sly data-sly-test.condition2andcondition1false="${!condition2 && !condition1}">
                        <div class="tabs-body-item is-active" data-tab-content-id="data-tab-content-id3">
                    </sly>
                    <sly data-sly-test="${!condition2andcondition1false}">
                        <div class="tabs-body-item" data-tab-content-id="data-tab-content-id3">
                    </sly>
                    </div>
                </sly>


            </div> 
        </div>

呈现的标记是--

<div class="tabs-body">
            <div class="container tabs-container">


                    <div class="tabs-body-item" data-tab-content-id="data-tab-content-id1">

                    </div>


                </div><!--extra div-->





                        <div class="tabs-body-item" data-tab-content-id="data-tab-content-id3">

                    </div>


            </div> 
        </div>

评论中提到了额外的 div。我花了很多时间，但无法弄清楚额外的 div 是从哪里添加的。请各位有眼光的专家帮我解决这个问题？

欣赏它。

Answer 1

这很可能是由于标签的无效嵌套。不要尝试将 JSTL 代码原样转换为 HTL。

<div class="tabs-body">
    <div class="container tabs-container">

        <!--/* First condition */-->
        <div class="tabs-body-item" data-tab-content-id="data-tab-content-id1" 
            data-sly-test.condition1="${properties.checkbox1}">

        </div>

        <!--/* Second condition */-->
        <div class="tabs-body-item ${ condition1 ? '' : 'is-active' }" 
            data-tab-content-id="data-tab-content-id2" 
            data-sly-test.condition2="${properties.checkbox2}">

        </div>

        <!--/* Third condition */-->
        <div class="tabs-body-item ${condition1 && condition2 ? 'is-active' : ''}" 
            data-tab-content-id="data-tab-content-id3" 
            data-sly-test="${properties.checkbox3}">

        </div>

    </div> 
</div>