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

Question

我有如下一段代码(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？

Answer 1

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

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

Answer 2

将 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>

Answer 3

在 css 中使用 ::empty 而不是

作为 blow:

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

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

Hide <hr> if div empty

html

jsp

jstl