jsp：expand / collapse仅适用于列表中的第一个元素

Question

我是jsp的新手。
我试图扩展/折叠每个＆＃34;价值代码＆＃34;在列表中。

当每个值代码扩展时，它应该有一个Value Item行表。

当我单击列表中的第一个值代码时，代码工作正常。 但是，我尝试扩展的每个其他值代码总是扩展列表中的第一个值代码而不是我点击的那个。

有什么想法吗？

感谢。

<%
List<ValueBean> vBeanList = cart.getValueList();
for (int index = 0; index<vBeanList.size(); index++) {
    ValueBean vBean = vBeanList.get(index);
    String tdStyle = "";
%>

  <br>
  <a class="collapsed" id="ValueId" href="javascript:toggleValue()">+ Value Code <%=vBean.getValueCode()%></a>
  <table style = "display:none" class="normalTable" id="ValueTable">
  <col class="col1"/>
  <col class="col2"/>
  <col class="col3"/>
  <col class="col4"/>
  <tr>
    <td valign=top><%="Type"%></td>
    <td valign=top><%="Description"%></td>
    <td valign=top><%="Value"%></td>
    <td valign=top><%="Unit"%></td>
  </tr>
        <%
        for (ValueItem item: vBean.getValueSet()) {
        %>
           <tr>
           <td valign=top <%=tdStyle%>><%=item.getType()%></td>
           <td valign=top <%=tdStyle%>><%=item.getDescription()%></td>
           <td valign=top <%=tdStyle%>><%=item.getDisplayValue()%></td>
           <td valign=top <%=tdStyle%>><%=item.getUnit()%></td>
           </tr>
        <%
        }
        %>
  </table>

<% } %>

<% if (vBeanList.size()<=0) { %>
<i>(No value defined)</i>
<% } %>

<div id="blanketDiv" class="blanket" style="display:none;"></div>


function toggleValue()
{
var groupId =  '#ValueId';
var tableId =  '#ValueTable';
var domContent= $(groupId).text();
if($(groupId).hasClass('collapsed'))
  {
      $(groupId).removeClass('collapsed');
      $(groupId).addClass('expanded');
      $(groupId).text('-  ' + domContent.slice(1));
      $(tableId).removeAttr('style');
  }
else
  {
      $(groupId).removeClass('expanded');
      $(groupId).addClass('collapsed');
      $(groupId).text('+  ' + domContent.slice(1));
      $(tableId).attr('style', 'display:none');
  }
}