没有 JQuery 的 Django Loop for Window 展开/折叠

Posted 2023-02-24

【中文标题】没有 JQuery 的 Django Loop for Window 展开/折叠

【英文标题】：Django Loop for Window expand/collapse without JQuery

【发布时间】：2018-07-24 02:10:42

【问题描述】：

我正在使用 Django。我是编码和第一个项目的新手。我不知道 JQuery，但我读到可以在没有 JQuery 的情况下折叠/展开窗口。

我关注了这个网页：CSS Expand/Collapse Section (A PEN BY Peter Nguyen)

问题是我试图在 for 循环中使用它。我能够获得我想要的布局，但是当我使用展开/折叠时，它仅适用于循环中的第一项。因此，展开/折叠在循环的第一次迭代时完美运行，但在其余部分则不行。

html

    % for assignment in assignments %
    <form id=form action= "/project/assignments" method='post'>
      % csrf_token % 
        <label class=labels><a href="% url 'project:assg' assignment_id=assignment.id %">
          Assignment: assignment.denominator - assignment.description </a></label>
        <input id="toggle" type="checkbox">
        <label for="toggle" id=labels2>Criteria</label>
        <div id=expand>
          <section>
            <p>[Number] [Name]: Expand content goes here.
            </p>
          </section>
        </div>
        <section>
        <textarea id=boxes name="review">assignments.review</textarea>
        <input type="hidden" name="Function_id" value=assignments.id>
        <input class=save_tasks type="submit" value="Save">
        </section>
    </form>

CSS

#toggle
display: none;
visibility:hidden;

#labels2
    display: block;
    padding: 0.5em;
    text-align: center;
    background-color: white;
    border-top: 4px solid #5e6b39;
    border-left: 4px solid #5e6b39;
    border-right: 4px solid #5e6b39; 
    width: 881px;
    color: black;
    font-size: 20px;
    font-weight: bold;
    margin: -6px;
    margin-top: 5px;
    margin-left: 0px;


#labels2:hover 
    color: #000;


#labels2::before 
    font-family: Consolas, monaco, monospace;
    font-weight: bold;
    font-size: 15px;
    content: "+";
    vertical-align: text-top;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 3px;
    background: radial-gradient(ellipse at center, #CCC 50%, transparent 
    50%);
    

#expand 
    height: 0px;
    overflow: hidden;
    transition: height 0.5s;
    background-color: white;
    color:black;
    font-size: 20px;
    border-bottom: 4px solid #5e6b39;
    border-left: 4px solid #5e6b39;
    border-right: 4px solid #5e6b39;
    width: 881px;
    padding: 10px;
    /* margin-top: -30px; */
  

#toggle:checked ~ #expand 
    height: 180px;


#toggle:checked ~ #labels2::before 
    content: "-";

如何让折叠/展开部门展开/折叠循环中的所有项目，而不仅仅是第一个？我的 Django 循环不正确吗？

谢谢！

【参考方案1】：

循环不是这里的问题。

您只在代码中使用 ID，并且由于它们在页面上应该是唯一的，因此浏览器只使用可以找到的第一个元素。

id 全局属性定义了一个唯一标识符（ID），它在整个文档中必须是唯一的。其目的是在链接（使用片段标识符）、脚本或样式（使用 CSS）时识别元素。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

---

我已经在必要的地方调整了你的代码一次：

.toggle 
  display: none;
  visibility:hidden;


.labels2 
  display: block;
  padding: 0.5em;
  text-align: center;
  background-color: white;
  border-top: 4px solid #5e6b39;
  border-left: 4px solid #5e6b39;
  border-right: 4px solid #5e6b39; 
  width: 881px;
  color: black;
  font-size: 20px;
  font-weight: bold;
  margin: -6px;
  margin-top: 5px;
  margin-left: 0px;


.labels2:hover 
  color: #000;


.labels2::before 
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 15px;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);


.expand 
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
  background-color: white;
  color:black;
  font-size: 20px;
  border-bottom: 4px solid #5e6b39;
  border-left: 4px solid #5e6b39;
  border-right: 4px solid #5e6b39;
  width: 881px;
  padding: 10px;
  /* margin-top: -30px; */


.toggle:checked ~ .expand 
  height: 180px;


.toggle:checked ~ .labels2::before 
  content: "-";

% for assignment in assignments %
  <form id=form action= "/project/assignments" method='post'>

    % csrf_token % 

      <label class=labels><a href="% url 'project:assg' assignment_id=assignment.id %">Assignment: assignment.denominator - assignment.description</a></label>

      <input id="toggle-assignments.id" class="toggle" type="checkbox">
      <label for="toggle-assignments.id" class="labels2">Criteria</label>

      <div class="expand">
        <section>
          <p>[Number] [Name]: Expand content goes here.</p>
        </section>
      </div>

      <section>
        <textarea id=boxes name="review">assignments.review</textarea>
        <input type="hidden" name="Function_id" value=assignments.id>
        <input class=save_tasks type="submit" value="Save">
      </section>

  </form>

---

此时重要的是输入class="toggle" 和标签class="labels2" 在id 和for 属性中获得唯一的区别，以便点击标签也检查正确的输入。

为此，您应该使用像 toggle-assignments.id 这样的动态值 - 原则上我也强烈建议将其用于循环中的所有 ID。

---

希望能帮到你:)

【讨论】：

完美——应该是这样的:)