Отрегулируйте высоту родительского div в зависимости от того, развернуты или свернуты дочерние div - PullRequest
Новая
       11

Отрегулируйте высоту родительского div в зависимости от того, развернуты или свернуты дочерние div

0 голосов
/ 08 марта 2020

У меня есть иерархически вложенные div: 

<div>
  This is level 1
  <div>
    This is level 2
    <div>
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
    </div>
  </div>
</div>

Дочерние узлы складываются, как здесь http://jsfiddle.net/8afwjquh/3/. Моя цель - сделать так, чтобы высота родительских элементов автоматически регулировалась в зависимости от того, какие дочерние узлы свернуты или развернуты, как здесь http://jsfiddle.net/tv4rnhb6/2/. В этом случае я закончил с «лестницей» и это не то, что я хочу. В первом прикрепленном JSFiddle мои дивы всегда имеют одинаковую высоту. Можно ли отрегулировать высоту, используя только CSS? Я хотел бы использовать код JavaScript только для переключения классов при нажатии кнопки. Я бы не хотел вычислять высоту div в JS, но, если это необходимо, дайте несколько советов.

Вот что я пробовал:

HTML

<div class="flex-row" level="1">
  <div class="content-container green show">
    <div class="not-listing">
      Brand 1
    </div>
    <button level="1" class="toggle-level expand">></button>
    <div class="flex-row" level="2">
      <div class="content-container green">
        <div class="not-listing">
          Category 1
        </div>
        <button level="2" class="toggle-level expand"> > </button>
        <div class="flex-row" level="3">
          <div class="content-container green">
            <ul>
              <li>Product 1</li>
            </ul>
        </div>
      </div>

      </div>
    </div>
    <div class="flex-row" level="2">
      <div class="content-container green">
        <div class="not-listing">
          Category 2
        </div>
        <button level="2" class="toggle-level expand">></button>
        <div class="flex-row" level="3">
          <div class="content-container green">
            <ul>
              <li>Product 1</li>
              <li>Product 2</li>
              <li>Product 3</li>
            </ul>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript (jQuery): 

$(document).ready(function() {
  $(".toggle-level").click(function() {
    const myLevel = $(this).attr("level");
    console.log("my level is: " + myLevel);
    const nextLevel = +myLevel + 1;
    $("div[level='" + nextLevel + "'] > .content-container").toggleClass("show");

    if ($(this).hasClass("expand")) {
        $("button[level='" + myLevel + "']").removeClass("expand");
    } else {
        $("button[level='" + myLevel + "']").addClass("expand");
    }
  });
})

и CSS: 

.content-container {
  position: relative;
  min-width: 150px;
  display: block;
  color: transparent;
  background: transparent;
  visibility: hidden;
  transition: all 0.3s;
}

.flex-row {
  display: flex;
}

.not-listing {
  width: 100%;
  position: absolute;
  padding: 10px;
}

.content-container > li {
  list-style: none;
  padding: -15px;
  position: absolute;
}

button {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  background: transparent;
  margin: 5px;
  transform: rotate(180deg);
  transition: transform 0.5s;
}

button.expand {
  transform: rotate(0deg);
  transition: transform 0.5s;
}

.content-container.show {
  color: black;
  background: lightgray;
  visibility: visible;
  transform: translateX(110%);
  transition: all 0.3s;
}

.content-container.show > li {
  position: relative;
}

div.flex-row[level="2"] {
  z-index: 4;
}

div.flex-row[level="3"] {
  z-index: 3;
}

div.flex-row[level="1"] {
  z-index: 1000;
}

div.flex-row[level="1"] > .content-container {
  transform: translateX(0%);
}
...