0

Есть такая разметка:

.block {
  background: #212121;
  border-radius: 20px;
  width: 95%;
  height: 270px;
}
<div class="block">
  <div class="lable">Tree</div>
  <details>
    <div class="row">
      <div class="col">
        <img src="img/img.png" class="ico" width="80" height="80">
        <p class="lable2">ABC</p>
      </div>
    </div>
  </details>
</div>

Как можно отследить открытие detalis и в этом случае изменить height у класса .block?

2
  • Отследи изменения атрибута open
    – Air
    21 апр 2019 в 17:41
  • И кстати у тебя тег не верно написан, надо details - а у тебя detalis
    – Air
    21 апр 2019 в 17:45

2 ответа 2

1

Но можно и проще...

let block = document.querySelector('.block')
document.querySelector('details').addEventListener('click', () => {
  console.log(getComputedStyle(block)['height']);
  block.classList.contains('active') ?
    block.classList.remove('active') :
    block.classList.add('active');
})
.block {
  background: red;
}

.active {
  height: 100px;
}
<div class="block">
  <details>
    <summary>Пример</summary>
    Привет медвед
  </details>
  <div/>

И еще вариант с отслеживанием атрибута OPEN

let block = document.querySelector('.block')
document.querySelector('details').addEventListener('click', () => {
  if (document.querySelector('details').open == '') {
    block.classList.add('active');
  } else {
    block.classList.remove('active');
  }

})
.block {
  background: red;
}

.active {
  height: 100px;
}
<div class="block">
  <details>
    <summary>Пример</summary>
    Привет медвед
  </details>
  <div/>

6
  • Решение хорошее, но всё же рекомендация автору вопроса: не используйте этот тег. details
    – meine
    21 апр 2019 в 18:06
  • @meine, согласен, если нужна поддержка IE...
    – Air
    21 апр 2019 в 18:16
  • 1
    @meine почему не использовать-то?
    – andreymal
    21 апр 2019 в 18:20
  • @andreymal, нет поддержи IE, Edge
    – meine
    21 апр 2019 в 18:22
  • @meine IE давно не поддерживается самим майкрософтом, а Edge переписывают на движок хрома — нет никакого смысла ориентироваться на них
    – andreymal
    21 апр 2019 в 18:25
0

Если не использовать скрипты. Тогда для начала необходимо изменить структуру Тэгов (см пример в коде). Далее в CSS пишем: details[open] .block и ставим нужные свойства для открытых деталей, к конкретному блоку. Я привел пример без эстетики. Надеюсь вам понятно.

.block {
  background: blue;
}

details {
  width: 95%;
  background-color: blue;
  cursor: pointer;
}

details[open] {
  background-color: red;
}

details[open] .block {
  background: blue;
  height: 270px;
}
<details>
  <div class="lable">Tree</div>
  <div class="block">
    <div class="row">
      <div class="col">
        <img src="img/img.png" class="ico" width="80" height="80">
        <p class="lable2">ABC</p>
      </div>
    </div>
  </div>
</details>

Дальше вопрос эстетики) Я имею в виду визуальное оформление. Всё.

1
  • На самом деле данный вариант лучший. Потому что не используется js/jq. 21 апр 2019 в 20:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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