表中的手风琴问题 - jquery [英] Accordion issue in Table - jquery

问题描述

我动态地绑定了数据。

但Accordion无法正常工作。

JSFiddle链接

i am binding the data dynamically.

but Accordion is not working properly.

JSFiddle link

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

please note: I cant change the HTML structure

Current table

Out put i needed

first accordion on click should dispaly child elements

Second accordion on click should dispaly child elements

where i am doing wrong??

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");
    });
});

Any Help is Appreciated

Thanks

解决方案

You need to go to the parent tr and then access the sibling with .next()

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

Fiddle

这篇关于表中的手风琴问题 - jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！