页面刷新后，手风琴表行和未更改表行

Question

我正在尝试做手风琴表行。 我想在按钮单击上展开/折叠表格行。 （加号（+）按钮展开行，而减号（-）按钮折叠行）

它应该从头开始以相同的方式工作。 默认情况下，页面最初打开时所有行都折叠，并且刷新页面后保持表的当前状态不变。

这是我实际想要做的图像 ： 输出图像

这是代码

CSS：

 table, tr, td, th
    {
        border: 1px solid black;
        border-collapse:collapse;
    }

HTML：

<table border="0">
<thead>
  <tr>
      <th>Large<a class="LargeToggleAll" href="#">+</a></th>
      <th>Medium<a class="MediumToggleAll" href="#">+</a></th>
      <th>Small</th>
  </tr>
  </thead>

 <tr id="test1" class="pa-dt-master-account-level" 
   data-account-level="master">
    <td>
            <a class="pa-dt-toggle toggleLarge" href="#">+</a>
            Test1
        </td>
    <td></td>
    <td></td>
  </tr>

  <tbody data-owner="test1">
  <!-- GROUP ACCOUNT -->
            <tr id="test1-1" class="pa-dt-group-account-level" 
      data-owner="test1" data-account-level="group">
        <td></td>
                <td><a class="pa-dt-toggle toggleMedium" href="#">+</a>Test1-1</td>   
        <td></td>
      </tr>
  </tbody>

  <tbody data-owner="test1">
    <tr id="test1-1-1" class="pa-dt-account-level" data-owner="test1-1"  
    data-account-level="account">
        <td></td>
        <td></td>
                <td>Test1-1-1</td>
      </tr>
 </tbody>

 <tbody data-owner="test1">
    <tr id="test1-1-2" class="pa-dt-account-level" data-owner="test1-1"  
      data-account-level="account">
      <td></td>
      <td></td>
            <td>Test1-1-2</td>
      </tr>  
 </tbody>

 <tbody data-owner="test1">
  <!-- GROUP ACCOUNT -->
            <tr id="test1-2" class="pa-dt-group-account-level" 
      data-owner="test1" data-account-level="group">
        <td></td>
                <td><a class="pa-dt-toggle toggleMedium" href="#">+</a>Test1-2</td>   
        <td></td>
      </tr>
 </tbody>

 <tbody data-owner="test1">
    <tr id="test1-2-1" class="pa-dt-account-level" data-owner="test1-2"  
       data-account-level="account">
        <td></td>
        <td></td>
                <td>Test1-2-1</td>
      </tr>
 </tbody>


<tr id="test2" class="pa-dt-master-account-level" 
   data-account-level="master">
    <td>
            <a class="pa-dt-toggle toggleLarge" href="#">+</a>
            Test2
        </td>
    <td></td>
    <td></td>
  </tr>

  <tbody data-owner="test2">
  <!-- GROUP ACCOUNT -->
            <tr id="test2-1" class="pa-dt-group-account-level" 
      data-owner="test2" data-account-level="group">
        <td></td>
                <td><a class="pa-dt-toggle toggleMedium" href="#">+</a>Test2-1</td>   
        <td></td>
      </tr>
  </tbody>

  <tbody data-owner="test2">
    <tr id="test2-1-1" class="pa-dt-account-level" data-owner="test2-1"  
    data-account-level="account">
        <td></td>
        <td></td>
                <td>Test2-1-1</td>
      </tr>
 </tbody>

 <tbody data-owner="test2">
    <tr id="test2-1-2" class="pa-dt-account-level" data-owner="test2-1"  
      data-account-level="account">
      <td></td>
      <td></td>
            <td>Test2-1-2</td>
      </tr>  
 </tbody>

 <tbody data-owner="test2">
  <!-- GROUP ACCOUNT -->
            <tr id="test2-2" class="pa-dt-group-account-level" 
      data-owner="test2" data-account-level="group">
        <td></td>
                <td><a class="pa-dt-toggle toggleMedium" href="#">+</a>Test2-2</td>   
        <td></td>
      </tr>
 </tbody>

 <tbody data-owner="test2">
    <tr id="test2-2-1" class="pa-dt-account-level" data-owner="test2-2"  
       data-account-level="account">
        <td></td>
        <td></td>
                <td>Test2-2-1</td>
      </tr>
 </tbody>      

</table>

JavaScript的：

   $(function () {
    // Hide all group and account level
    $('.pa-dt-group-account-level').hide();
    $('.pa-dt-account-level').hide();

    // Define our button for toggling
    var button = $( "a.pa-dt-toggle" );

    button.click(function() {
        // get the parent ID
        var parentId = $(this).parents('tr').attr("id");
        // get the parent account level
        var accountType = $(this).parents('tr').attr("data-account-level");

        console.log(parentId);
        console.log(accountType);

        $(this).text($(this).text() == '+' ? '-' : '+');

        if ($(this).hasClass("pa-dt-toggle-active")) {
            $(this).removeClass('pa-dt-toggle-active');
            $('[data-owner="' + parentId +'"]').hide();

        } else {
            $(this).addClass('pa-dt-toggle-active');
            $('[data-owner="' + parentId +'"]').show();
        }
    });
    button.click(function(e){
        e.stopPropagation();
    });

                $('.LargeToggleAll').click(function () {

                    $(this).text($(this).text() == '+' ? '-' : '+');

                    $(".toggleLarge").each(function(){

                            if ($(this).hasClass("pa-dt-toggle-active")) {

                                $(this).removeClass('pa-dt-toggle-active');
                                $('[data-account-level="group"]').hide();
                                $('[data-account-level="account"]').hide();
                                  $(this).text("+");
                                $(".MediumToggleAll").text("+");

                            } else {

                                $(this).addClass('pa-dt-toggle-active');
                                $('[data-account-level="group"]').show();
                                $(this).text("-");
                                }
                    })
              });

              $('.MediumToggleAll').click(function () {

                    $(this).text($(this).text() == '+' ? '-' : '+');

                  $(".toggleMedium").each(function(){

                            if ($(this).hasClass("pa-dt-toggle-active")) {

                                $(this).removeClass('pa-dt-toggle-active');
                                $('[data-account-level="account"]').hide();
                                $(".toggleMedium").text("+");

                            } else {
                                $(this).addClass('pa-dt-toggle-active');
                                $('.MediumToggleAll').addClass('pa-dt-toggle-active');
                                $('[data-account-level="group"]').show();
                                $('[data-account-level="account"]').show();
                                $(".toggleLarge").text("-");
                                $(".toggleMedium").text("-");
                    $(".LargeToggleAll").text("-");
                                }
                    })
             });
    });

https://jsfiddle.net/y4Mdy/2494/ ，但是它似乎无法正常工作。 我希望任何人都可以帮助我。

Answer 1

使用嵌套的div会更好。

这是我想出的，它的优点是您可以通过定义data-level来使用任意数量的data-level 。

 $(function() { function getToogleFlag(sourceElement) { return (sourceElement.attr('data-collapse') === '1'); } function setToggleButtonStatus(sourceElement, flag) { // Flag: 1-> Collapsed, 2-> Expanded if (flag === true) { // Set to collapsed sourceElement.attr('data-collapse', '1').text('+'); } else { sourceElement.removeAttr('data-collapse').text('-'); } } function setToggleButtonStatusToggle(sourceElement) { var curFlagValue = sourceElement.attr('data-collapse'); if (curFlagValue === '1') { // Toggle to expanded setToggleButtonStatus(sourceElement, false) } else { // Toggle to expanded setToggleButtonStatus(sourceElement, true) } } function getToogleButton(source) { return $('.toggleButton', source); } // Parse level by reading 'data-level' attribute function getLevel(el) { var dataLevel = el.attr('data-level'); //console.log( 'Data lavel to be parsed: ' + dataLevel); if (dataLevel) { // Parse available level return parseInt(el.attr('data-level')); } else { return 0; } } // Handles show/hide of level item function showOneLevelDeepItem(levelElement, show) { function startCheck(parentElement) { var curNextItem = parentElement.next(); // Ensuure next item received if (curNextItem.length === 0) return; // Get next element level var curNextItemLevel = getLevel(curNextItem); if (curNextItemLevel === level || curNextItemLevel < level) { // No more check required // Reached to next same level item // or higher level. return; } /* else if ( curNextItemLevel > validLevel && !show){ // Hide all nested deep level elements curNextItem.hide(); // continue with next check startCheck( curNextItem, false ); }*/ else if (curNextItemLevel > validLevel) { // continue with next check startCheck(curNextItem); } else if (curNextItemLevel === validLevel) { // Set found flag to true isFound = true; // Found one level deep item show ? curNextItem.show() : curNextItem.hide(); // continue with next check startCheck(curNextItem); } } // Find toggle button within level element var toggleButton = $('.toggleButton', levelElement), // Get level of current element level = getLevel(levelElement), // Valid item level will be one level deeper validLevel = (level + 1), // Flag if child item(s) found isFound = false; // Find next level item that needs to be show/hidden startCheck(levelElement); if (isFound) { setToggleButtonStatus(getToogleButton(levelElement), !show); } } function showLevelItem(source) { showOneLevelDeepItem(source, true); } function hideLevelItem(source) { function check(startElement) { var nextElement = startElement.next(), nextElementLevel = getLevel(nextElement); if (nextElement.length === 0) { // No more items return; } else if (nextElementLevel === sourceLevel) { // Encountered same level item return; } else if (nextElementLevel < sourceLevel) { // Reached one level up return; } else if (nextElementLevel >= oneDeepLevel) { coll.push(startElement); //showOneLevelDeepItem( startElement, false ); check(nextElement) } } var // Source level sourceLevel = getLevel(source), // One deep level oneDeepLevel = (sourceLevel + 1), // collection of items coll = []; check(source); for (var i = coll.length - 1; i >= 0; i--) { showOneLevelDeepItem(coll[i], false); } } function expandItem(expandItemElement, show) { function checkNext(curElement) { // Get the next element var el = curElement.next(); //console.log( el ); // On no more next element, exit if (el.length === 0) return; // Get next element level var nextLevel = getLevel(el); if (nextLevel === levelToMatch) { // This is direct child element // we need to toggle this showHideElement(expandItemElement, show); checkNext(el); } else if (nextLevel > levelToMatch && !show) { // For hiding, all sub level elements // needs to be hidden showHideElement(el, false); checkNext(el); } else if (nextLevel > levelToMatch) { // This is higher level then we need to match // just ignore and continue with next checkNext(el); } else if (nextLevel === level) { // Matched with same level element // Need to stop } else { // level not found for this element // continue with next checkNext(el); } } var level = getLevel(expandItemElement), levelToMatch = level + 1; checkNext(expandItemElement); } function expandAllClick() { var el = $(this), level = parseInt(el.attr('data-all-level')), flagShow = getToogleFlag(el); var foundElements = $('[data-level=' + level + ']'); foundElements.each(function() { // Current found element var curElement = $(this); if (flagShow) { showLevelItem(curElement); } else { showOneLevelDeepItem(curElement, false); } }); // Toggle button update setToggleButtonStatusToggle(el); } function toggle() { // Get toggle button var toggleButtonClicked = $(this); // Get the container element on which button is clicked var container = toggleButtonClicked.closest('tbody'), flagShow = getToogleFlag(toggleButtonClicked); //console.log('Flag: ' + flagShow); if (flagShow) { showLevelItem(container); } else { hideLevelItem(container) } //showOneLevelDeepItem( container, flagShow ); //expandItem( container, flagShow ); //setToggleButtonStatusToggle( toggleButtonClicked ); } $('.toggleButton').click(toggle); // Initially collapse all $('[data-level=2],[data-level=3]').hide(); // Expand all $('[data-all-level]').click(expandAllClick); }); 

 body { font-family: Arial, Helvetica, sans-serif; color: gray; } table { border-collapse: collapse; } table th, table td { padding: 5px; border: solid 1px #B1B1B1; } table th { background-color: #DFEFF0; } table tbody tr:nth-child(even) td { background-color: lightblue; } .toggleButton { display: inline-block; padding: 5px; margin: 0.2em; background-color: burlywood; font-size: 1em; text-decoration: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <thead> <tr> <th>Large<a data-all-level="1" data-collapse="1" class="toggleButton LargeToggleAll" href="#">+</a></th> <th>Medium<a data-all-level="2" data-collapse="1" class="toggleButton MediumToggleAll" href="#">+</a></th> <th>Small</th> </tr> </thead> <tbody data-level="1" class="level1"> <tr id="test1" class="pa-dt-master-account-level" data-account-level="master"> <td> <a data-collapse="1" class="toggleButton toggleButton pa-dt-toggle toggleLarge" href="#">+</a> Test1 </td> <td></td> <td></td> </tr> </tbody> <tbody data-level="2" class="level2"> <!-- GROUP ACCOUNT --> <tr id="test1-1" class="pa-dt-group-account-level" data-account-level="group"> <td></td> <td><a data-collapse="1" class="toggleButton toggleButton toggleButton pa-dt-toggle toggleMedium" href="#">+</a>Test1-1</td> <td></td> </tr> </tbody> <tbody data-level="3"> <tr id="test1-1-1" class="pa-dt-account-level" data-account-level="account"> <td></td> <td></td> <td>Test1-1-1</td> </tr> </tbody> <tbody data-level="3"> <tr id="test1-1-2" class="pa-dt-account-level" data-account-level="account"> <td></td> <td></td> <td>Test1-1-2</td> </tr> </tbody> <tbody data-level="2" class="level2"> <!-- GROUP ACCOUNT --> <tr id="test1-2" class="pa-dt-group-account-level" data-account-level="group"> <td></td> <td><a data-collapse="1" class="toggleButton toggleButton pa-dt-toggle toggleMedium" href="#">+</a>Test1-2</td> <td></td> </tr> </tbody> <tbody data-level="3" class="level3"> <tr id="test1-2-1" class="pa-dt-account-level" data-account-level="account"> <td></td> <td></td> <td>Test1-2-1</td> </tr> </tbody> <tbody data-level="1"> <tr id="test2" class="pa-dt-master-account-level" data-account-level="master"> <td> <a data-collapse="1" class="toggleButton pa-dt-toggle toggleLarge" href="#">+</a> Test2 </td> <td></td> <td></td> </tr> </tbody> <tbody data-level="2"> <!-- GROUP ACCOUNT --> <tr id="test2-1" class="pa-dt-group-account-level" data-account-level="group"> <td></td> <td><a data-collapse="1" class="toggleButton pa-dt-toggle toggleMedium" href="#">+</a>Test2-1</td> <td></td> </tr> </tbody> <tbody data-level="3"> <tr id="test2-1-1" class="pa-dt-account-level" data-account-level="account"> <td></td> <td></td> <td>Test2-1-1</td> </tr> </tbody> <tbody data-level="3"> <tr id="test2-1-2" class="pa-dt-account-level" data-account-level="account"> <td></td> <td></td> <td>Test2-1-2</td> </tr> </tbody> <tbody data-level="2"> <!-- GROUP ACCOUNT --> <tr id="test2-2" class="pa-dt-group-account-level" data-account-level="group"> <td></td> <td><a data-collapse="1" class="toggleButton pa-dt-toggle toggleMedium" href="#">+</a>Test2-2</td> <td></td> </tr> </tbody> <tbody data-level="3"> <tr id="test2-2-1" class="pa-dt-account-level" data-account-level="account"> <td></td> <td></td> <td>Test2-2-1</td> </tr> </tbody> </table>