动态创建JavaScript函数，该函数将在JSP页面中隐藏和显示div

Question

我的JSP代码是

<c:forEach var="batchException" items="${batchExceptionType}">
<button> ${batchException.key}</button>
<div id="${batchException.key}">
...
</div>
</c:forEach>

batchExceptionType是一个Map，它来自使用JSTL的Java代码。

我想在单击按钮时隐藏并显示div。

由于创建的div数量不是固定的。 所以我不确定如何创建JavaScript函数来隐藏和显示此div

提前致谢。

Answer 1

尝试这个

<c:forEach var="batchException" items="${batchExceptionType}">
<button onclick="hideShowDiv(${batchException.key})"> ${batchException.key}</button>
<div id="${batchException.key}">
...
</div>
</c:forEach>

然后在脚本中

<script>
   function hideShowDiv(divId){
      $(#divId).toggle();
   }

</script>

Answer 2

您也可以使用纯CSS解决方案来做到这一点。 通过使用输入复选框及其样式属性:checked 。

<label class="button" for="toggle-1">${batchException.key}</label>
<input type="checkbox" id="toggle-1">
<div id="${batchException.key}">

和CSS：

div {
       display: none
}

input[type=checkbox]:checked + div {
       display: inherit;
}

更好的解释在这里 。