Question

基本结构是一个有几行的表。我希望表格的上半部分显示，下半部分折叠，直到用户点击READ MORE单元格。我有这个功能，但我无法正确选择所有的＆＃34; .collapseThis＆＃34;行和在页面加载时隐藏它们。

这是表格

<div id="tables">
    <table class="expandableTable">
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr class="accordion">
            <td colspan="2">READ MORE</td>
        </tr>
        <tr class="collapseThis">
            <td></td>
            <td></td>
        </tr>
    </table>
    <table class="expandableTable">
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr class="accordion">
            <td colspan="2">READ MORE</td>
        </tr>
        <tr class="collapseThis">
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

这是JQuery。

$(document).ready(function () {

    function getCollapsable($row) {
        var children = [];
        while ($row.next().hasClass('collapseThis')) {
            children.push($row.next());
            $row = $row.next();
        }
        return children;
    }

    function hideTableRows($row) {
        children = getCollapsable($row);
        $.each(children, function () {
            $(this).toggle();
        });
    }

    $('#tables').each($('expandableTable'), function () {
        hideTableRows($(this).children().hasClass('.accordion'));
});

Answer 1

你可以使用css来设置显示值，不需要使用jQuery来设置初始状态。

如果你想使用jQuery，请使用像$('#tables .expandableTable .collapseThis').hide()这样的简单选择器。

＆＃13;

$(document).ready(function() {

  //if you don't want to use css
  //$('#tables .expandableTable .collapseThis').hide();
});

＆＃13;

#tables .expandableTable .collapseThis {
  display: none;
}

＆＃13;

<div id="tables">
  <table class="expandableTable">
    <tr>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
    <tr class="accordion">
      <td colspan="2">READ MORE</td>
    </tr>
    <tr class="collapseThis">
      <td>2.1</td>
      <td>2.2</td>
    </tr>
  </table>
  <table class="expandableTable">
    <tr>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
    <tr class="accordion">
      <td colspan="2">READ MORE</td>
    </tr>
    <tr class="collapseThis">
      <td>2.1</td>
      <td>2.2</td>
    </tr>
  </table>
  <table class="expandableTable">
    <tr>
      <td>1.1</td>
      <td>1.2</td>
    </tr>
    <tr class="accordion">
      <td colspan="2">READ MORE</td>
    </tr>
    <tr class="collapseThis">
      <td>2.1</td>
      <td>2.2</td>
    </tr>
  </table>
</div>

＆＃13;

使用JQuery选择具有特定类的所有元素

1 个答案: