如何发布新内容 div 的某些部分被按下

Question

标题可能令人困惑，但没有更好的提问方式。我正在使用 django 制作一个求职网站。我在前端并没有真正的经验。我想要显示一份工作机会列表，当其中一个被点击时，我想要一个带有附加信息（应用按钮，详细描述）的放大版本来显示所点击的特定工作机会。有点像 linkedin 是如何做到的。这是我用来列出所有职位的代码。

我知道我可能需要一个动态的 url 但是我不知道如何在前端实现它。 Comps 只是公司模型中所有 objects 的列表。

{% for comp in comps %}

    <div class="CompList">
        <span>{{comp.jtitle}}</span>
        <h2>{{comp.name}}</h2>
        <h3>{{comp.country}}, {{comp.city}}</h3>
    </div>


{% endfor %}

Answer 1

您查找的内容称为 Accordion，您可以在其中找到许多使用 JS 或“CSS-Hacks”的教程。

然而，鲜为人知的是 <details>- 和 <summary>-标签，您可以使用纯 HTML.

来完成此操作

details 包装所有标题和描述，而 summary 将显示可见标题。一旦你点击它，它会展开并显示其余部分：

/* CSS only for viszualisation purpose */
details {
  border: 2px solid black;
  border-radius: 7px;
  padding: 10px;
}

summary {
  list-style: none;
  font-size: 1.5em;
}

<details>
  <summary>Job Title</summary>
  <p>Long job description<br>
    can be added<br>
    right after the<br>
    summary tag</p>
</details>

如何发布新内容 div 的某些部分被按下

How to put up new content some part of a div is pressed

html

django

frontend