0

Вот простые примеры выпадающих блоков: Пример 1 Пример 2

Подскажите пожалуйста как зафиксировать ширину выпадающего блока?

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}
button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 20%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

div.panel {
  padding: 0 18px;
  background-color: #444;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  max-width: 50%;
}
<button class="accordion">Section 1</button>
<div class="panel">
  <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>

6
  • Добавьте HTML код чтоли...
    – MihailPw
    Commented 17 июн. 2017 в 17:14
  • AGS17 Так по ссылка "Пример 1" и "Пример 2" все есть.
    – Andrew F.
    Commented 17 июн. 2017 в 17:26
  • Добавил код сюда.
    – Andrew F.
    Commented 17 июн. 2017 в 17:29
  • хоть посмотрели бы что вставляете... HTML и JS из одного примера, CSS из другого...
    – MihailPw
    Commented 17 июн. 2017 в 17:34
  • 2
    @AndrewF. А в чём вопрос? Что значит зафиксировать? Установите фиксированное значение width, вот и будет ширина "зафиксирована". Commented 17 июн. 2017 в 22:56

2 ответа 2

2

Вот первый способ изменив каркас html. И добавив для button-а и выпадающего меню ширину на 100%

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}
.menu_container{
  width: 200px;
}
button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  box-sizing: border-box;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

div.panel {
  width: 100%;
  padding: 0 18px;
  background-color: #444;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  box-sizing: border-box;
}
<div class="menu_container">
  <button class="accordion">Section 1</button>
  <div class="panel">
    <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>
</div>

А этот вариант с помощю ՝javascript՝ при открытии задаем ширину выпадающего меню на ширину button.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    
    panel.style.width = this.offsetWidth+"px";
    
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}
button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 40%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  box-sizing:border-box;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

div.panel {
  padding: 0 18px;
  background-color: #444;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  box-sizing:border-box;
}
<button class="accordion">Section 1</button>
<div class="panel">
  <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>

-1

Свойство height, указанное в %, работает только если для внешнего блока указана высота. Стандарт CSS 2.1 предоставляет обход этой проблемы, отдельно указывая, что проценты работают при position:absolute. На практике это часто выручает. Если у родительского элемента не установлено height, а указано min-height, то, чтобы дочерний блок занял 100% высоты, нужно родителю поставить свойство height: 1px.

1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.