将max-height设置为每个元素的scrollHeight

时间：2017-06-29 15:39:40

标签： javascript jquery html css

我正在创建一个垂直嵌套手风琴，并且在使用max-height属性时遇到问题。我想将max-height设置为每个.panel-nested元素的scrollHeight。目前，它已设置为第一个.panel-nested元素的scrollHeight，并且从max-height开始，每个元素都具有相同的元素，而不是每个元素的max-height。以下是一个示例：https://jsfiddle.net/hg5rmhv2/4/ 

var acc = $('.accordion'),
  accNestedParent = $('.accordion-nested-parent'),
  accNestedHeader = $('.accordion-nested-header');

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    if ($(this).hasClass('active')) {
      $('.accordion').removeClass('active');
      $('.accordion-header').removeClass('active');
      $('.panel').removeClass('active');
      $('.panel').css('max-height', '');
      $(this).next().next().removeClass("top-border");
    } else {
      $('.accordion').removeClass('active');
      $('.accordion-header').removeClass('active');
      $('.panel').removeClass('active');
      $('.panel').css('max-height', '');
      $(this).next().next().removeClass("top-border");

      var accPanel = this.nextElementSibling;
      var nextAcc = this.nextElementSibling.nextElementSibling;

      $(this).addClass("active");
      $(this).next().addClass('active');
      $(this).next().next().addClass("top-border");
      if (accPanel.style.maxHeight) {
        accPanel.style.maxHeight = null;
      } else {
        accPanel.style.maxHeight = accPanel.scrollHeight + "px";
      }
    }
  }
}

for (i = 0; i < accNestedParent.length; i++) {
  accNestedParent[i].onclick = function() {
    if ($(this).hasClass('active')) {
      $('.accordion').removeClass('active');
      $('.accordion-header').removeClass('active');
      $('.accordion-nested-parent').removeClass('active');
      $('.panel').removeClass('active');
      $('.panel-nested-parent').removeClass('active');
      $('.panel').css('max-height', '');
      $('.panel-nested-parent').css('max-height', '');
      $(this).next().next().removeClass("top-border");
    } else {
      $('.accordion').removeClass('active');
      $('.accordion-header').removeClass('active');
      $('.accordion-nested-parent').removeClass('active');
      $('.panel, .panel-nested-parent').removeClass('active');
      $('.panel, .panel-nested-parent').css('max-height', '');
      $(this).next().next().removeClass("top-border");

      var $accNestedParent = $('.panel-nested-parent');
      var totalHeight = $('.panel-nested-parent')[0].scrollHeight;

      $(this).addClass('active');

      $('.panel-nested-parent').each(function() {
        if ($(this).css('max-height') == true) {
          $(this).css('max-height', '');
        } else {
          $(this).css('max-height', totalHeight + 'px');
        }
      });
    }
  }
}

for (i = 0; i < accNestedHeader.length; i++) {
  accNestedHeader[i].onclick = function() {
    if ($(this).find('.accordion-nested').hasClass('active')) {
      $('.panel').removeClass('active');
      $('.panel').css('max-height', '');
      $('.panel-nested').removeClass('active');
      $('.panel-nested').css('max-height', '');
      $('.accordion').removeClass('active');
      $('.accordion-header').removeClass('active');
      $('.accordion-nested').removeClass('active');
      $(this).next().next().removeClass("top-border");
    } else {
      $('.panel').removeClass('active');
      $('.panel').css('max-height', '');
      $('.panel-nested').removeClass('active');
      $('.panel-nested').css('max-height', '');
      $('.accordion').removeClass('active');
      $('.accordion-header').removeClass('active');
      $('.accordion-nested').removeClass('active');
      $(this).next().next().removeClass("top-border");

      var accPanel = $(this).find('.panel-nested');

      $(this).find('.accordion-nested').addClass('active');
      $(this).find('.panel-nested').addClass('active');
      $(this).find('.accordion-nested').addClass("top-border");

      if (accPanel.css('max-height') == true) {
        accPanel.css('max-height', '');
      } else {
        var a = $('.panel-nested')[0].scrollHeight + $('.panel-nested-parent')[0].scrollHeight;
        $('.panel-nested-parent').css('max-height', a);
        /***********************************************************/
        accPanel.css('max-height', $('.panel-nested')[0].scrollHeight);
        /************************************************************/

      }
    }
  }
}
div.accordion-header {
  border: 1px solid #1e5d86;
  background: #f7ba01;
  color: #fff;
  padding: 4px;
  outline: none;
  font-size: 15px;
  font-family: sans-serif;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
}

.accordion,
.accordion-nested,
.accordion-nested-parent {
  border: 1px solid #1e5d86;
  border-top: none;
  background: #21aedb;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  width: 100%;
  outline: none;
  font-size: 14px;
  text-align: center;
}

.accordion.active,
.accordion-nested.active,
.accordion-nested:hover,
.accordion-nested-parent.active,
.accordion-nested-parent:hover,
.accordion:hover {
  background: #0E82A7;
}

.accordion:after,
.accordion-nested:after,
.accordion-nested-parent:after {
  content: '\002B';
  color: #fff;
  font-weight: bold;
  float: right;
}

button.accordion.active,
.accordion-nested.active,
.accordion-nested-parent.active {
  border-bottom: none;
}

button.accordion.active:after,
.accordion-nested.active:after,
.accordion-nested-parent.active:after {
  content: "\2212";
}

button.accordion.top-border,
.accordion-nested.top-border,
.accordion-nested-parent.top-border {
  border-top: 1px solid #1e5d86;
  margin-top: -1px;
}

.panel,
.panel-nested,
.panel-nested-parent {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .4s ease-out;
  transition: max-height .4s ease-out;
}

div.panel.active {
  margin-bottom: 8px;
}

.accordion-nested-header:hover button {
  background: #0E82A7;
}

.panel-nested-parent:nth-child(even) tr {
  border-top: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 3px;
  color: #fff;
  background: #f7ba01;
  vertical-align: middle;
}

tr {
  border: 1px solid #1e5d86;
}

td {
  font-family: Arial, sans-serif;
  font-size: 13px;
  padding: 2px;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  background: #21aedb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion-nested-parent">Kaimynai (nauja v)</button>
<div class="panel-nested-parent">
  <table>
    <tr>
      <th>Pelnas nuo įsigytų</th>
    </tr>
  </table>
  <table>
    <tr class="accordion-nested-header" style="border: none;">
      <td style="vertical-align: top; padding: 0;">
        <button style="border-right: none;" class="accordion-nested">Gyvulių (5%)</button>
        <div class="panel-nested">
          <table>
            <tr style="border-right: none;">
              <th style="background: #21aedb;">Gyvulys</th>
              <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
              <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Pelnas (Eur)</th>
            </tr>
            <tr>
              <td>Gyvulys</td>
              <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
              <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
            </tr>
            <tr>
              <td>Gyvulys</td>
              <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
              <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
            </tr>
            <tr>
              <td>Gyvulys</td>
              <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
              <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
            </tr>
            <tr>
              <td>Gyvulys</td>
              <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
              <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
            </tr>
            <tr>
              <td>Gyvulys</td>
              <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
              <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
            </tr>
            <tr>
              <td>Gyvulys</td>
              <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
              <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
            </tr>
          </table>
        </div>
        <td style="vertical-align: top; padding: 0;">
          <button style="border-right: none;" class="accordion-nested">Fermų (10%)</button>
          <div class="panel-nested">
            <table>
              <tr style="border-right: none;">
                <th style="background: #21aedb;">Ferma</th>
                <th style="background: #21aedb; border-left: 1px solid #1f76a1; ">Kiekis</th>
                <th style="background: #21aedb; border-left: 1px solid #1f76a1; ">Pelnas (Eur)</th>
              </tr>
              <tr>
                <td>Gyvulys</td>
                <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
                <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
              </tr>
              <tr>
                <td>Gyvulys</td>
                <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
                <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
              </tr>
              <tr>
                <td>Gyvulys</td>
                <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
                <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
              </tr>
              <tr>
                <td>Gyvulys</td>
                <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
                <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
              </tr>
              <tr>
                <td>Gyvulys</td>
                <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
                <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
              </tr>
              <tr>
                <td>Gyvulys</td>
                <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
                <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
              </tr>
              <tr>
                <td>Gyvulys</td>
                <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
                <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
              </tr>
              <tr>
                <td>Gyvulys</td>
                <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
                <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
              </tr>
              <tr>
                <td>Gyvulys</td>
                <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
                <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
              </tr>
              <tr>
                <td>Gyvulys</td>
                <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
                <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
              </tr>
              <tr>
                <td>Gyvulys</td>
                <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
                <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
              </tr>
              <tr>
                <td>Gyvulys</td>
                <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
                <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
              </tr>
            </table>
          </div>
          <td style="vertical-align: top; padding: 0; ">
            <button style="border-right: none; " class="accordion-nested ">Fabrikų (10%)</button>
            <div class="panel-nested ">
              <table>
                <tr>
                  <th style="background: #21aedb; ">Fabrikas</th>
                  <th style="background: #21aedb; border-left: 1px solid #1f76a1; ">Kiekis</th>
                  <th style="background: #21aedb; border-left: 1px solid #1f76a1; ">Pelnas</th>
                </tr>
                <tr>
                  <td>Fabrikai</td>
                  <td style="border-left: 1px solid #1f76a1; ">1 vnt.</td>
                  <td style="border-left: 1px solid #1f76a1; ">1 Eur</td>
                </tr>
              </table>
            </div>
          </td>
          <td style="vertical-align: top; padding: 0; ">
            <button class="accordion-nested ">Kepyklų (10%)</button>
            <div class="panel-nested ">
              <table>
                <tr style="border-left: none; ">
                  <th style="background: #21aedb; ">Kepykla</th>
                  <th style="background: #21aedb; border-left: 1px solid #1f76a1; ">Kiekis</th>
                  <th style="background: #21aedb; border-left: 1px solid #1f76a1; ">Pelnas</th>
                </tr>
                <tr style="border-left: none; ">
                  <td>Kepyklos</td>
                  <td style="border-left: 1px solid #1f76a1; ">1 vnt.</td>
                  <td style="border-left: 1px solid #1f76a1; ">1 Eur</td>
                </tr>
              </table>
            </div>
          </td>
    </tr>
  </table>
</div>
<div class="panel-nested-parent">
  <table>
    <tr>
      <th>Pelnas nuo įsigytų</th>
    </tr>
  </table>
  <table>
    <tr class="accordion-nested-header" style="border: none;">
      <td style="vertical-align: top; padding: 0;">
        <button style="border-right: none;" class="accordion-nested">Gyvulių (5%)</button>
        <div class="panel-nested">
          <table>
            <tr style="border-right: none;">
              <th style="background: #21aedb;">Gyvulys</th>
              <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
              <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Pelnas (Eur)</th>
            </tr>
            <tr>
              <td>Gyvulys</td>
              <td style="border-left: 1px solid #1f76a1;">0 vnt.</td>
              <td style="border-left: 1px solid #1f76a1;">0 Eur</td>
            </tr>
          </table>
        </div>
        <td style="vertical-align: top; padding: 0;">
          <button style="border-right: none;" class="accordion-nested">Fermų (10%)</button>
          <div class="panel-nested">
            <table>
              <tr style="border-right: none;">
                <th style="background: #21aedb;">Ferma</th>
                <th style="background: #21aedb; border-left: 1px solid #1f76a1; ">Kiekis</th>
                <th style="background: #21aedb; border-left: 1px solid #1f76a1; ">Pelnas (Eur)</th>
              </tr>
              <tr>
                <td>Fermos</td>
                <td style="border-left: 1px solid #1f76a1; ">1 vnt.</td>
                <td style="border-left: 1px solid #1f76a1; ">
                </td>
              </tr>
            </table>
          </div>
          <td style="vertical-align: top; padding: 0; ">
            <button style="border-right: none; " class="accordion-nested ">Fabrikų (10%)</button>
            <div class="panel-nested ">
              <table>
                <tr>
                  <th style="background: #21aedb; ">Fabrikas</th>
                  <th style="background: #21aedb; border-left: 1px solid #1f76a1; ">Kiekis</th>
                  <th style="background: #21aedb; border-left: 1px solid #1f76a1; ">Pelnas</th>
                </tr>
                <tr>
                  <td>Fabrikai</td>
                  <td style="border-left: 1px solid #1f76a1; ">1 vnt.</td>
                  <td style="border-left: 1px solid #1f76a1; ">1 Eur</td>
                </tr>
              </table>
            </div>
          </td>
          <td style="vertical-align: top; padding: 0; ">
            <button class="accordion-nested ">Kepyklų (10%)</button>
            <div class="panel-nested ">
              <table>
                <tr style="border-left: none; ">
                  <th style="background: #21aedb; ">Kepykla</th>
                  <th style="background: #21aedb; border-left: 1px solid #1f76a1; ">Kiekis</th>
                  <th style="background: #21aedb; border-left: 1px solid #1f76a1; ">Pelnas</th>
                </tr>
                <tr style="border-left: none; ">
                  <td>Kepyklos</td>
                  <td style="border-left: 1px solid #1f76a1; ">1 vnt.</td>
                  <td style="border-left: 1px solid #1f76a1; ">1 Eur</td>
                </tr>
              </table>
            </div>
          </td>
    </tr>
  </table>
</div>

看看这一行：

accPanel.css('max-height', $('.panel-nested')[0].scrollHeight);

如您所见，它将accPanel max-height设置为第一个.panel-nested元素的scrollHeight，同一规则适用于每个.panel-nested元素。根据{{​​1}}，每个元素中的max-height应该不同。是否可以使用jQuery scrollHeight函数执行此操作？你可以看到为什么我不能使用$.each()： enter image description here

第二个accPanel.css('max-height', $('.panel-nested')[0].scrollHeight);使用第一个.panel-nested元素的.panel-nested，因此它不会显示完整的第二个max-height内容。每个.panel-nested元素都会发生同样的事情，除了第一个.panel-nested元素中的第一个元素。所以，我必须做两件事才能使一切正常运作：

  1. 将.panel-nested-parent设置为每个max-height元素的.panel-nested。
  2. 将scrollHeight设置为每个max-height元素的.panel-nested-parent。

0 个答案:

没有答案
相关问题
最新问题