Как переключить свойства div, щелкнув по нему?

Я хочу сделать окно, которое расширяется при нажатии и закрывается при повторном нажатии. Я использую flask для отображения всех строк данных, но это не должно быть проблемой и может быть проигнорировано. Прямо сейчас я установил, что когда вы нажимаете на div, он расширяется, но как только вы отпускаете, div снова закрывается. Есть ли способ превратить этот div в какой-то переключатель, использующий python, javascript или даже CSS?

Флакон HTML/Python:

<div class="container">
  {%for i, value in verb_data.items() %}
  <div class="indevidual_verbs">{{ i }} . {{ value }}</div><br>
  {%endfor%}
</div>

CSS:

.indevidual_verbs {
    cursor: pointer;
}

.indevidual_verbs:active {
    padding-bottom: 300px;
}

Это не обычный javascript, поэтому вам не хватает соответствующего тега.

Rickard Elimää 23.04.2022 15:32

Ничего из этого не является Javascript. Это HTML и CSS. Вещи в скобках {{}} можно игнорировать, это просто утончает колбу, чтобы получить данные из файла python.

G Force 23.04.2022 16:07
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
2
46
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В зависимости от того, что вы хотите сделать, вы можете даже использовать html-элемент Детали, который автоматически реализует эту функциональность.

Если вы можете использовать javascript, есть способ легко переключить класс:

// Get a reference to the container
const container = document.getElementById("container");

// When we click on the container...
container.addEventListener("click", function (e) {
  // we can toggle the "open" class
  this.classList.toggle("open");
});
/* Just a way to show the container */
#container {
  padding: 20px;
  border: solid 1px #000;
}

/* Hide the content (you can do it in many different ways) */
#container .inner {
  display: none;
 }
 
/* Show the content when the "open" class is added to the container */
#container.open .inner {
  display: block;
}
<div id="container">
  <div class="inner">
    This is just some example text
  </div>
</div>

Другие вопросы по теме