表中的手风琴问题 - jquery

Question

我动态绑定数据。

但手风琴不能正常工作。

JSFiddle链接

http://jsfiddle.net/aff4vL5g/360/

请注意：我无法更改HTML结构

当前表格

我需要

点击第一个手风琴应该显示儿童元素

点击的第二个手风琴应该显示儿童元素

我做错了？

HTML

    <table>
    /* first parent*/ 
             <tr>
              <td>
                 <a href="#">
                    <div id="accordion"></div>
                 </a>
              </td>
              <td><a href="#">Profit</a></td>
              <td>35%</td>
              <td>22%</td>

           </tr>
    /* child1*/ 
           <tr class="parentTR">
              <td></td>
              <td>
                 <a href="#" >
                    <div id="accordion"></div>
                    Business - 1
                 </a>
              </td>
              <td>35%</td>
              <td>22%</td>

           </tr>
    /* child2*/ 
           <tr class="parentTR">
              <td></td>
              <td>
                 <a href="#">
                    <div id="accordion"></div>
                    Business - 2
                 </a>
              </td>
              <td>38%</td>
              <td>28%</td>
           </tr>
/* second parent*/ 
             <tr>
              <td>
                 <a href="#">
                    <div id="accordion"></div>
                 </a>
              </td>
              <td><a href="#">Loss</a></td>
              <td>15%</td>
              <td>12%</td>

           </tr>
    /* child1*/ 
           <tr class="parentTR">
              <td></td>
              <td>
                 <a href="#" >
                    <div id="accordion"></div>
                    Business - 1
                 </a>
              </td>
              <td>35%</td>
              <td>22%</td>

           </tr>
    /* child2*/ 
           <tr class="parentTR">
              <td></td>
              <td>
                 <a href="#">
                    <div id="accordion"></div>
                    Business - 2
                 </a>
              </td>
              <td>38%</td>
              <td>28%</td>
           </tr>
        </table>

Jquery的

$(function () {
    //  Accordion Panels
    $(".parentTR").hide();
    $("a .accordion ").click(function () {
        $(this).next(".parentTR").slideToggle("slow").siblings(".parentTR:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings(".accordion").removeClass("active");
    });
});

感谢任何帮助

由于

Answer 1

您需要转到父tr，然后使用.next（）

访问兄弟

$(this).closest('tr')
     .next(".parentTR").slideToggle("slow")
     .siblings(".parentTR:visible").slideUp("slow");

Fiddle

Answer 2

我尝试使用此解决方案JSFiddle

HTML：

     <table>
     <tr childTRClass="A1">
      <td>
         <a href="#">
            <div class="accordion"></div>
         </a>
      </td>
      <td><a href="#">Profit</a></td>
      <td>35%</td>
      <td>22%</td>
   </tr>

   <tr class="childTR A1">
      <td></td>
      <td>
         <a href="#" >
            <div class="accordion"></div>
            Business - 1
         </a>
      </td>
      <td>35%</td>
      <td>22%</td>
   </tr>
   <tr class="childTR A1">
      <td></td>
      <td>
         <a href="#">
            <div class="accordion"></div>
            Business - 2
         </a>
      </td>
      <td>38%</td>
      <td>28%</td>
   </tr>

     <tr childTRClass="A2">
      <td>
         <a href="#">
            <div class="accordion"></div>
         </a>
      </td>
      <td><a href="#">Loss</a></td>
      <td>15%</td>
      <td>12%</td>
   </tr>

   <tr class="childTR A2">
      <td></td>
      <td>
         <a href="#" >
            <div class="accordion"></div>
            Business - 1
         </a>
      </td>
      <td>35%</td>
      <td>22%</td>
   </tr>
   <tr class="childTR A2">
      <td></td>
      <td>
         <a href="#">
            <div class="accordion"></div>
            Business - 2
         </a>
      </td>
      <td>38%</td>
      <td>28%</td>
   </tr>

</table>

JQuery的：

  $(document).ready(function() {
  $(".childTR").hide();
    $('a .accordion').click(function() {
        var openTRClass = $(this).closest('tr').attr('childTRClass');
               $(".childTR:visible").slideUp("slow");
       $("."+ openTRClass).slideToggle("slow")
               if($('.active').length > 0)
        {
            $('.active').removeClass("active");
        }

        $(this).toggleClass("active");        
    });
});

Answer 3

首先需要去主要的父母。

$(function () {
    $(".parentTR").hide();
    
    $("a .accordion ").click(function () {
        $(".parentTR").hide();
        $(this).closest('.main').nextUntil(".main").slideToggle("slow");
       
        $(this).toggleClass("active");
        $(this).siblings(".accordion").removeClass("active");
    });
});

这是Fiddle。