元素已附加但未在 nextElementSibling 中显示

Question

我有一个可以动态生成可关闭对象的程序。当用户单击创建的可关闭对象时，会在可关闭对象的内容中显示一个输入框和一个按钮。然后用户可以在文本框中输入文本，然后按下按钮。然后用户文本将显示在选定的可关闭内容中。

一切正常，除了当我尝试在选定的可关闭内容中显示用户输入时。

发生了什么：

当用户在文本框中输入内容时，它会附加到可关闭的内容中：

只有在我关闭选中的可关闭内容后，文本才会显示在可关闭内容中：

为什么我点击添加任务按钮后，用户输入的内容没有显示在选定的可关闭项中？

这是我的完整代码：

var currentClosable;
var currentContent;
function selectedColl(){
 document.getElementById("inputTaskDiv").style.display = "block";
 currentClosable = event.target;
 currentContent = currentClosable.nextElementSibling;
  var inputTaskDiv = document.getElementById("inputTaskDiv");
  currentContent.append(inputTaskDiv);
}

var taskCounter = 0;
function addTask() {
  var text = document.getElementById("taskInput").value;
  // create a new div element and give it a unique id
  var newTask = $("<input type='checkbox'><label>"+ text + "</label><br>");
  newTask.id = 'temp' + taskCounter;
  taskCounter++
  // and give it some content
  var newContent = document.createTextNode(text);

  $(currentContent).append(newTask); //Why isn't it being displayed??
  console.log("appended");
}

var elementCounter = 0;
var elementCounterContent = 0;
var text;
function addElement() {
  text = document.getElementById("input").value;
  // create a new div element and give it a unique id
  
  var newDiv = $("<button class='collapsible' onclick='selectedColl()'></button>").text(text);
  var newContentOfDiv = $("<div class='content'></div>");


  newDiv.id = 'temp' + elementCounter;
  newContentOfDiv.id = 'content' + elementCounterContent;

  newDiv.classList = "div";
  elementCounter++
  elementCounterContent++
  // and give it some content
  var newContent = document.createTextNode(text);

  // add the newly created element and its content into the DOM

  document.getElementById("input").value = " ";
  $("body").append(newDiv, newContentOfDiv);

  newDiv.click(function() {
    this.classList.toggle("active");
    content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    }
  });
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <input id="input" type="text"><button onclick="addElement()">Add</button>
     
   <div id="inputTaskDiv" style="display:none">
     <input id="taskInput" type="text"><button onclick="addTask()">Add Task</button>
    </div>

Answer 1

所做的更改是在 CSS 和 JS 中。

在 CSS 中，您可以查看样式“.content”中注释了哪些行：max-height 和 overflow

JS中的变化是： 我用这个content.style.display改变了content.style.maxHeight

this.classList.toggle("active");
content = this.nextElementSibling;
if (content.style.display === 'block') {
    content.style.display = 'none';
} else {
    content.style.display = 'block';
}

示例：

var currentClosable;
var currentContent;
function selectedColl() {
    document.getElementById("inputTaskDiv").style.display = "block";
    currentClosable = event.target;
    currentContent = currentClosable.nextElementSibling;
    var inputTaskDiv = document.getElementById("inputTaskDiv");
    currentContent.append(inputTaskDiv);
}

var taskCounter = 0;
function addTask() {
    var text = document.getElementById("taskInput").value;
    // create a new div element and give it a unique id
    var newTask = $("<input type='checkbox'><label>" + text + "</label><br>");
    newTask.id = 'temp' + taskCounter;
    taskCounter++
    // and give it some content
    var newContent = document.createTextNode(text);

    $(currentContent).append(newTask); //Why isn't it being displayed??
    console.log("appended");
}

var elementCounter = 0;
var elementCounterContent = 0;
var text;
function addElement() {
    text = document.getElementById("input").value;
    // create a new div element and give it a unique id

    var newDiv = $("<button class='collapsible' onclick='selectedColl()'></button>").text(text);
    var newContentOfDiv = $("<div class='content'></div>");


    newDiv.id = 'temp' + elementCounter;
    newContentOfDiv.id = 'content' + elementCounterContent;

    newDiv.classList = "div";
    elementCounter++
    elementCounterContent++
    // and give it some content
    var newContent = document.createTextNode(text);

    // add the newly created element and its content into the DOM

    document.getElementById("input").value = " ";
    $("body").append(newDiv, newContentOfDiv);

    newDiv.click(function () {
        this.classList.toggle("active");
        content = this.nextElementSibling;
        if (content.style.display === 'block') {
            content.style.display = 'none';
        } else {
            content.style.display = 'block';
        }
    });
}

.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active,
.collapsible:hover {
    background-color: #555;
}

.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.content {
    padding: 0 18px;
    /* max-height: 0; */
    /* overflow: hidden; */
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input id="input" type="text"><button onclick="addElement()">Add</button>

<div id="inputTaskDiv" style="display:none">
    <input id="taskInput" type="text"><button onclick="addTask()">Add Task</button>
</div>