如何通过点击来切换div属性?

Question

我想使一个窗口，展开时点击和关闭时再次点击。我使用烧瓶来显示所有行的数据，但这不应该是一个问题，实际上可以忽略。现在我设置的是当你点击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;
}

Answer 1

根据你想做的，你甚至可以使用details 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>