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

中的#report tr.odd

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

将匹配所有奇数行，您只需选择具有此类

的单击行

 $('#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();
           }
      });
 });

修改您还需要选择正确的<ul>，我已经更新了上面的代码。

JQuery可折叠表无法正常工作

1 个答案: