jquery - JQuery可折叠表不起作用

Question

我在我的 JQuery 代码中需要一些帮助，我似乎无法理解我哪里出错了。这是一个简单的“父母”和“孩子”风格的折叠桌。因此，首先隐藏所有“孩子”，如果您单击“父母” ，它会显示所有孩子。我的代码的问题是，当我单击父级时，它的所有子级也会显示在所有其他父级中。谢谢

 $(document).ready(function() {
 $("#report tr:odd").addClass("odd");
 $("#report tr:not(.odd)").hide();
 $("#report tr:first-child").show();

 $('location.href').click(function() {
    $.ajax({
    type : 'GET',
    url : 'Test',
    data : '${cat.categoryId}',
 success : function(response) {
    $('ul').html(response);
    $("#report tr.odd").next("tr").toggle();
    }
     });
   });
 });

JSP

<c:if test="${!empty categoryList}">
 <table id="report">
    <tr>
        <th>Category Name</th>
    </tr>
        <c:forEach items="${categoryList}" var="cat">
        <tr onclick="location.href='${cat.categoryId}'" >
            <td>${cat.categoryName}</td>
            <td><div class="arrow"></div></td>
        <tr>
            <td colspan="5">
            <c:forEach items="${prodList}" var="prod">
            <ul>
                <li>${prod.productName}</li>
            </ul>
            </c:forEach>
        </tr>
    </c:forEach>
 </table>
</c:if>

控制器

    @RequestMapping(value="{Id}", method = RequestMethod.GET)
public String showProductByCatId(@PathVariable("Id") Integer Id, Model model){
    List<Product> prod = purchaseOrderService.listProductsByCatId(Id);
    model.addAttribute("prodList", prod);
    model.addAttribute("categoryList",purchaseOrderService.listCategory());
    return "Test";
}

Answer 1

The #report tr.odd in

$("#report tr.odd").next("tr").toggle();

will match all odd rows, you need to select only the clicked row with something like this

 $('#report tr.odd').click(function() {
      var child = $(this).next('tr');

      $.ajax({
           type : 'GET',
           url : 'Test',
           data : '${cat.categoryId}',
           success : function(response) {
                child.find('ul').html(response);
                child.toggle();
           }
      });
 });

EDIT: You need to select the right <ul> as well, I've updated the code above.