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 you have read our privacy policy.

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