Блог

Главная - Вопросы по программированию - Складная секция внутри другой складной секции не будет достаточно расширяться

Складная секция внутри другой складной секции не будет достаточно расширяться

#javascript #html #css

Вопрос:

В следующем коде у меня есть сворачиваемый раздел внутри другого сворачиваемого раздела. Когда я открываю самый внешний сворачиваемый раздел, он отлично работает и показывает мне содержимое под ним. Но когда я пытаюсь открыть внутренние сворачиваемые разделы, они не расширяются настолько, чтобы я мог видеть все содержимое. Пожалуйста, запустите следующую программу, чтобы увидеть проблему.

 var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i  ) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight   "px";
    } 
  });
} 
 .collapsible {
  background-color: #2d2e2e;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: black;
}

.collapsible:after {
  content: '02B';
  color: white;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

.active:after {
  content: "2212";
}

.collapse_content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;

} 
 <button class="collapsible">Full Collapsible Set:</button>
<div class="collapse_content">
  <button class="collapsible">Open Section 1</button>
  <div class="collapse_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <button class="collapsible">Open Section 2</button>
  <div class="collapse_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
  <button class="collapsible">Open Section 3</button>
  <div class="collapse_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

Ответ №1:

Если анимация не нужна, вы можете установить max-height значение fit-content

В противном случае вы можете добавить элемент scrollHeight в высоту его родителя. И чтобы избежать установки слишком большого числа (если один и тот же дочерний элемент был открыт/закрыт несколько раз), вы можете добавить transitionend даже прослушиватель, чтобы установить правильное max-height значение родителя там:

 var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i  ) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
// managed by css
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight   "px";
      content.parentNode.style.maxHeight = (parseInt(content.parentNode.style.maxHeight)   content.scrollHeight)   "px";
    } 
  });
  coll[i].nextElementSibling.addEventListener("transitionend", function()
  {
      this.parentNode.style.maxHeight = this.parentNode.scrollHeight   "px";
  });
} 
 .collapsible {
  background-color: #2d2e2e;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: black;
}

.collapsible:after {
  content: '02B';
  color: white;
  font-weight: bold;
  float: left;
  margin-right: 5px;
}

.active:after {
  content: "2212";
}

.collapse_content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;
} 
 <button class="collapsible">Full Collapsible Set:</button>
<div class="collapse_content">
  <button class="collapsible">Open Section 1</button>
  <div class="collapse_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <button class="collapsible">Open Section 2</button>
  <div class="collapse_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
  </div>
  <button class="collapsible">Open Section 3</button>
  <div class="collapse_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

Комментарии:

1. Спасибо, что показали ответ с примером. Я ценю вашу помощь.

2. Только что понял, что, поскольку вы уже переключаете имя класса, вам не нужно устанавливать max-height его в javascript, это можно сделать в css. Я обновил ответ.

3. @NewGuy вы знаете, что это избавит вас от анимации, которая была у вас в первую очередь?

4. @TemaniAfif спасибо, я обновил ответ.

Метки: