如果 div 为空，则隐藏 <hr>答案

【问题标题】：Hide <hr> if div empty如果 div 为空，则隐藏 <hr>
【发布时间】：2021-11-24 19:33:18
【问题描述】：

我有以下代码（jsp）

        ...
        <hr>
        <div class="actions">
            <div class="btn-toolbar">
                <c:if test="${condition1}">
                    <button type="button" class="btn" >
                        btn1
                    </button>
                </c:if>
                <c:if test="${condition2}">
                    <button type="button" class="btn">
                        btn2
                    </button>
                </c:if>
                <c:if test="${condition3}">
                    <button type="button" class="btn">
                        btn3
                    </button>
                </c:if>
            </div>
        </div>
        <hr> 
        ...

根据条件，div 可能为空，然后我们得到一个双 hr-tag。只有当 div 不为空时，是否有一种优雅的方式来显示第一个 hr-tag？

【问题讨论】：

JSP 和 JavaScript 没有关系，我把标签去掉了。
@T.J.Crowder 我们可以用JS来隐藏，甚至可以用CSS
查看此链接：https://stackoverflow.com/questions/5935892/if-else-within-jsp-or-jstl

标签： html jsp jstl

【解决方案1】：

将 c:if 测试结果保存到变量中？

<div class="actions">
    <div class="btn-toolbar">
        <c:if test="${condition1}" var="rt1">
            <button type="button" class="btn" >
                btn1
            </button>
        </c:if>
        <c:if test="${condition2}" var="rt2">
            <button type="button" class="btn">
                btn2
            </button>
        </c:if>
        <c:if test="${condition3}" var="rt3">
            <button type="button" class="btn">
                btn3
            </button>
        </c:if>
    </div>
</div>
<c:if test="${rt1 || rt2 || rt3}">
<hr> 
</c:if>

【讨论】：

【解决方案2】：

在 css 中使用 ::empty

作为打击：

div.action{
  border-top:1px solid #cdcdcd;
  border-bottom:1px solid #cdcdcd
}
  div.action::empty{
  border-top:1px solid #cdcdcd
}

【讨论】：

【解决方案3】：

我对 JSP 不太熟悉，但您可以尝试将其中一个 hr 包装在单独的 if 条件中，如下所示：

<c:if test="${condition1 || condition2 || condition3}">
  <hr>
</c:if>

【讨论】：