Question

我有一张桌子上有一些trs。

有一些tr-s是可见的，另一种是不可见的。

在init中可见的tr-s，我们将调用：mainTrs。

当点击可见的tr时，所有带有id的类的tr-s都将可见。

再次点击时，所有打开的tr-s都将关闭。

当隐形变得可见时，表格会跳过＆＃34;。

我希望mainTrs保持与其td-s相同的宽度..

（其他人在打开时打开）。

例如：

在Init中

，假设这是表：

现在，这些行在切换时应保持相同的宽度。

效果不错：

如您所见，init（红色和蓝色）中的行保持相同的宽度。

其他行变得更大，但不会影响蓝色和红色。

效果不佳：

这很糟糕，因为红色和蓝色的行比初始化的要大。

我尝试使用mainTrs的最大宽度，但没有成功。

这是我的表：

<table>
    <tr id="a123" onclick="toggleTable(this)" data-isOpen="false">
        <td>name</td>
        <td>last name</td>
    </tr>
    <tr class="tr_a123 hidden">
        <td>this is my first cell</td>
        <td>this is my second cell</td>
    </tr>
    <tr class="tr_a123 hidden">
        <td>another text</td>
        <td>another text</td>
    </tr>
    <tr id="a456" onclick="toggleTable(this)" data-isOpen="false">
        <td>name</td>
        <td>last name</td>
    </tr>
    <tr class="tr_a456 hidden">
        <td>wow</td>
        <td>more text</td>
    </tr>
    <tr class="tr_a456 hidden">
        <td>something</td>
        <td>sometimes</td>
    </tr>
</table>

这是我的javascript：

function toggleTable(element) {
    var isNeedToShowMore = $(element).attr('data-isOpen') == "false";
    $(element).attr('data-isOpen', isNeedToShowMore);

    var elementId = $(element).attr('id');
    if (isNeedToShowMore) {
        $('tr.tr_' + elementId).show();
    }
    else {
        $('tr.tr_' + elementId).hide();
    }
}

这是我的小提琴：

http://jsfiddle.net/52kj3b8m/

Answer 1

你得到的是这样的空格，因为你使用的是<table>。表格列将采用最大内容的大小，因此如果每个单元格的宽度与其上方和下方的单元格相同，您将获得不希望出现的那种间距。为了更好地理解我的意思，请为<td>添加边框。您想要的结果可以通过使用手风琴来实现。

代码段1说明了您收到不受欢迎的内容呈现的原因。

Snippet 2是一支手风琴，请注意，此演示会使用jQuery，jQuery UI和Dark Hive theme。

SNIPPET 1

function toggleTable(element) {
    var isNeedToShowMore = $(element).attr('data-isOpen') == "false";
    $(element).attr('data-isOpen', isNeedToShowMore);

    var elementId = $(element).attr('id');
    if (isNeedToShowMore) {
        $('tr.tr_' + elementId).show();
    }
    else {
        $('tr.tr_' + elementId).hide();
    }
}

td {
  border: 2px dashed red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr id="a123" onclick="toggleTable(this)" data-isOpen="false">
        <td>name</td>
        <td>last name</td>
    </tr>
    <tr class="tr_a123 hidden">
        <td>this is my first cell</td>
        <td>this is my second cell</td>
    </tr>
    <tr class="tr_a123 hidden">
        <td>another text</td>
        <td>another text</td>
    </tr>
    <tr id="a456" onclick="toggleTable(this)" data-isOpen="false">
        <td>name</td>
        <td>last name</td>
    </tr>
    <tr class="tr_a456 hidden">
        <td>wow</td>
        <td>more text</td>
    </tr>
    <tr class="tr_a456 hidden">
        <td>something</td>
        <td>sometimes</td>
    </tr>
</table>

SNIPPET 2

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>Accordions</title>
  <link href='http://code.jquery.com/ui/1.12.1/themes/dark-hive/jquery-ui.css' rel='stylesheet'>
  <style>
    d
  </style>
</head>

<body>
  <header>

  </header>
  <main>
    <section class='rows'>
      <dl>
        <dt>Header 1</dt>
        <dd>
          <p>
            Yoggothog mg f'athg ep hrii orr'e 'fhalma hafh'drn phlegeth, nglui ron phlegeth mnahn' throd 'fhalma chtenff R'lyeh bug, Chaugnar Faugnnyth nog hai nw ebunma llll 'ai naYoggoth, grah'noth nwagl ph'hlirgh nog syha'h Yoggoth cya. Ch' namnahn' f'li'hee uaaah
            'fhalma Nyarlathotepog 'fhalma r'luh ya shugg vulgtlagln, y'hah ngfhtagn n'ghft y-fm'latgh k'yarnak hafh'drn Cthulhu llll. Shtunggli ftaghu Chaugnar Faugn uaaah nog kadishtu lw'nafh mg ehye y'hah goka, y-ee gokaoth hupadgh nalw'nafh zhro orr'e
            shugg stell'bsna ph''ai, geb nnnch' li'hee grah'nnyth cr'luh Azathoth kadishtu y-n'gha nnngnaiih. Cphlegeth orr'e 'bthnk Nyarlathotep shagg shugg ph'Azathoth nggeb stell'bsna, cthrod shogg n'gha zhro sgn'wahl orr'e shogg sgn'wahl, nnnhai shugg
            goka k'yarnak fhtagnnyth uh'e Shub-Niggurath.
          </p>
          <p>
            Zhro fhtagn Nyarlathotep n'gha 'bthnk geb ftaghu gotha tharanaknyth f''fhalma grah'n, f'ilyaa naflshtunggli nnnchtenff ebunma gof'nn fm'latghyar mnahn' Tsathoggua y-shugg. Tharanak uln h'stell'bsna n'ghaog naflli'hee shtunggli h'Cthulhu geb shogg ch',
            ph'gnaiih wgah'n ngshogg y'hah r'luhyar orr'e ftaghu wgah'n, h'shugg shoggnyth syha'h wgah'n navulgtm nak'yarnak geb stell'bsna. Gof'nn uh'e ngk'yarnak sll'ha Hastur fm'latgh Yoggoth naflnglui ilyaaagl, hlirgh li'hee tharanak Yoggoth ilyaa
            Yoggoth ya, ch' nilgh'ri orr'eog f'sgn'wahl nglui ilyaa goka. Vulgtlagln ep sll'hanyth n'ghft shogg mg naflhupadgh cnog, ph'mg grah'nyar nw grah'n 'bthnk 'ai uaaah ngvulgtlagln, chtenff nnnfm'latgh 'bthnk ch' hrii vulgtm.
          </p>
          <p>
            Lloig nog zhro 'bthnk R'lyeh 'fhalma nglui sll'ha uln, bug Yoggoth epyar stell'bsna shugg ebunma nnnorr'e, chrii h'syha'h sll'ha lloig f'wgah'n ph'gotha hlirgh. Sgn'wahl syha'h y-ehye fm'latgh vulgtlagln h'nog naflehye mg Azathoth naorr'e nnnhafh'drn,
            naflChaugnar Faugn y-hrii wgah'n naep 'fhalma Azathoth wgah'n naflr'luh ilyaa ooboshu Nyarlathotep, h'Tsathoggua Shub-Niggurath y-hai mg lw'nafh Nyarlathotep uh'e cron nahupadgh.
          </p>
        </dd>

        <dt>Header 2</dt>
        <dd>
          <iframe id='ifrm1' name='ifrm1' src='http://w3schools.com' width='90%'></iframe>
        </dd>

        <dt>Header 3</dt>
        <dd>
          <video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" width='500' controls></video>
        </dd>

      </dl>
    </section>
  </main>
  <footer>

  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $(function() {
      $('.rows').accordion({
        collapsible: true,
        header: 'dt',
        heightStyle: 'content',
        active: false
      });
    });
  </script>
</body>

</html>

一些桌子的行应该保持相同的宽度而其他的不应该

1 个答案:

SNIPPET 1

SNIPPET 2