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

Question

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

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

这是我真正想要做的事情的形象： Output Image

这是代码

的CSS：

$('.some-class-for-all-nav-links').click(function () {
// select the nav and close it with css or javascript
})

HTML：

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

的javascript：

<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>

https://jsfiddle.net/y4Mdy/2494/然而它似乎没有按预期工作。 我希望有人能帮助我。

Answer 1

使用嵌套的div会更好。

这是我想出的一点，好的部分是你可以通过定义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>