显示隐藏的 div 不是下推其他内容，而是在页面的另一部分

Question

我有一个简单的网站后端，其中包含待办事项列表、前几个月完成的工作历史记录（以及其他一些不相关的内容。

待办事项列表由使用 AJAX 动态加载的多个元素组成，“历史记录”的工作方式相同。

对于所有尚未选中的待办事项列表项，如果用户单击复选框，则表单应该向下滑动，将其他 div 进一步向下推，但由于某种原因它们没有。

“历史”发生的情况几乎完全相同：如果用户单击月份名称，则表格会向下滑动（使用 jQuery），显示该月完成的所有工作。

我首先创建了“历史”区域，然后将其复制到待办事项列表中，但由于某种原因，当表单向下滑动待办事项列表项时，它会显示表单，但在下面的待办事项列表项之上.它根本不会推倒他们。而如果我“打开”一个历史表，它会下推其他历史月份条目。

这是关闭的待办事项列表，然后检查了一项以显示表单（暂时忽略 CSS 问题，仍然是 WIP）：

关闭：

打开：

这里是历史部分，首先是“关闭”，然后是一个月“打开”：

关闭：

打开：

<div id="todoList-container">
     <h1>Todo</h1>
     <div class="todoList">
       <div data-id="1">
        <input style="display: none;" type="checkbox" class="todoItemCheckbox" name="todoItem0" />
        <a href="#" class="todoBox"></a>
        <span>test 1</span>
        <span style="margin-left: 20px;">Development</span>
        <div class="todoForm" style="display: none;">
          <form class="todoItemCompleteForm" data-id="1">
            <input class="todoItemCompleteHours" type="text" placeholder="Hours">
            <textarea class="todoItemCompleteDescription" placeholder="description of work"></textarea>
            <a href="javascript:;" class="todoItemCompleteConfirm">Complete</a><a href="javascript:;" class="todoItemCompleteCancel">Cancel</a>
          </form>
        </div>
      </div>
      <div data-id="2">
        <input style="display: none;" type="checkbox" class="todoItemCheckbox" name="todoItem1" />
        <a href="#" class="todoBox"></a>
        <span>test 2</span>
        <span style="margin-left: 20px;">Research</span>
        <div class="todoForm" style="display: none;">
          <form class="todoItemCompleteForm" data-id="2">
            <input class="todoItemCompleteHours" type="text" placeholder="Hours">
            <textarea class="todoItemCompleteDescription" placeholder="description of work"></textarea>
            <a href="javascript:;" class="todoItemCompleteConfirm">Complete</a><a href="javascript:;" class="todoItemCompleteCancel">Cancel</a>
          </form>
        </div>
      </div>
    </div>
   </div>

相关JS：

$.ajax({
            url: API_URL + "todos/user/",
            data: {
              token: LOGIN_TOKEN,
              sortCompleted: 1
            },
            type: "GET",
            dataType: "json"
          })
          .done(function(json) {
            for(var k = 0; k < json.length; k++) {
                //Show todoList strikethrough or with hidden form.
                if(json[k].status == "1") {
                  $('.todoList').append('<div data-id="' + json[k].ID + '"><span><strike>' + json[k].name + '</strike></span><span style="margin-left: 20px;">' + groups[parseInt(json[k].groupID)] + '</span><span style="float:right; margin-right:10px;" class="date">' + json[k].completed + '</span></div>');
                }
                else {
                  $('.todoList').append('<div data-id="' + json[k].ID + '"><input style="display: none;" type="checkbox" class="todoItemCheckbox" name="todoItem' + k + '" /><a href="#" class="todoBox"></a><span>' + json[k].name + '</span><span style="margin-left: 20px;">' + groups[parseInt(json[k].groupID)] + '</span><div class="todoForm" style="display: none;"><form class="todoItemCompleteForm" data-id="'+json[k].ID+'"><input class="todoItemCompleteHours" type="text" placeholder="Hours" /><textarea class="todoItemCompleteDescription" placeholder="description of work"></textarea><a href="javascript:;" class="todoItemCompleteConfirm">Complete</a><a href="javascript:;" class="todoItemCompleteCancel">Cancel</a></form></div></div>');
                }

            }

            $('.todoList').append('<div><input id="todoAddItemInput" type="text" placeholder="Todo Name" /><select><option>Development</option></select><a href="#" class="todoAddItem"><i class="fa fa-plus"></i></a></div>');
          })

相关 CSS：

#todoList-container {
    width: 80%;
    border: 1px solid #CCC;
    margin: 20px auto;
    border-radius: 10px;
    padding: 0 20px 40px;
}

#todoList-container h1 {
    margin-top: 10px;
}

#todoList-container .todoList {
    list-style-type: none;
}

#todoList-container .todoList div {
    font-family: 'Lora', serif;
    font-size: 18px;
    padding: 2px 4px;
    margin: 8px 0;
    border-bottom: 1px  solid #CCC;
    height: 40px;
    /* line-height: 40px; */
}

#todoList-container span {
    vertical-align: -2px;
    margin-left: 52px;
    color: #333;
}

#todoList-container .todoBox+span {
    margin-left: 0px;
    color: #777;
}

#todoList-container .todoBox {
    display: inline-block;
    height: 30px;
    width: 30px;
    border: 1px solid #CCC;
    margin-right: 20px;
    border-radius: 4px;
    text-decoration: none;
    /* vertical-align: 3px; */
}

#todoList-container .todoBox::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f00c";
    color: #CCC;
    z-index: 999;
    top: 4px;
    left: 5px;
    position: relative;
    font-size: 20px;
}

#todoList-container .todoBoxSelected::after {
    color: #6db235;
}

#todoList-container #todoAddItemInput {
    margin-left: 48px;
    font-family: 'Lora', serif;
    border:0;
    font-size: 18px;
    padding: 2px 4px;
    color: #777;
    border-right: 1px solid #CCC;
    margin-right: 20px;
    vertical-align: -4px;
}

我在我的 css 或 js/jQuery 中看不到任何不同之处。有人可以帮忙吗？

谢谢

Answer 1

愚蠢的是，在我添加表单之前，我仍然为 .todoList 的所有 div 子项设置了一个高度，这就是导致表单没有“推”其余部分的原因。