Question

我正在尝试实现以下目标：我想使用户能够在上方或下方添加节，每个节都可以扩展，并且在每个节内，用户都可以在上方或上方添加文件。如图所示：

例如，如果用户要在上方添加部分，则其外观应为：

现在，我的代码始终将部分添加到末尾，这里是我的代码：

function addSection() {
  $("#header ul").append(
    '<li ><button onclick="addSection()">Add Section</button></li><li><button type="button" class="collapsible">Open Section 1</button><div class="content"><button>upload file</button></div></li></li><li><button  onclick="addSection()">Add Section</button></li>'
  );
  handleEvents();
}


function handleEvents() {
  var coll = document.getElementsByClassName("collapsible");
  var i;
  for (i = 0; i < coll.length; i++) {
    coll[i].removeEventListener("click", function() {});
  }

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display !== "none") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
}

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

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #90ee90;
}

body {
  font-size: 15px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

<div id="header">
  <ul class="tabs">
    <li>
      <button onclick="addSection()">Add Section</button>
    </li>
    <li>
      <button type="button" class="collapsible">Open Section 1</button>
      <div class="content">
        <button>upload file</button>
      </div>
    </li>
    <li>
      <button onclick="addSection()">Add Section</button>
    </li>
  </ul>
</div>

Answer 1

在使用当前代码进行此操作之前，我们首先需要改进。

您需要以某种方式知道您所按下的addSection按钮的类型以及目的是什么。是要在上方创建部分的按钮还是要在下方创建部分的按钮。关于如何传达这一点，您可以执行以下操作。
- 您可以决定在按钮上添加数据属性，然后在点击事件发生时读取该数据属性
- 您可以决定将参数传递给函数addSection，该参数将告诉您单击的意图
您可以使用jQuery实用工具来append或prepend来使用兄弟姐妹节。要查找同级部分，可以使用jQuery .closest。使用此实用程序，您可以发现最接近您的点击的兄弟姐妹。

考虑到这一点，我们可以构建以下代码：

function addSection(dir) {
    // we are now passing a dir as in direction
    // to know if we should append or prepend

    // lets get the total count of sections 
    var sectionsCount = $('.collapsible').length;

    // create next section
    var item = getListItem(sectionsCount);

    // find what is the closes section where the click originated
    var closestLi = $(this.event.target).closest('li');

    // check the dir
    if(dir === 'up') {
      $(closestLi).prepend(item);
    }
    if(dir === 'down') {
      $(closestLi).append(item);
    }
    handleEvents();
}

如果您想摆弄一下，可以在这里找到完整的演示示例：https://jsfiddle.net/ft1xou2v/2/

function getListItem(sectionsCount) {
  	return '<li ><button onclick="addSection(\'up\')">Add Section ↑</button></li><li><button type="button" class="collapsible">Open Section '+ sectionsCount +'</button><div class="content"><button>upload file</button></div></li></li><li><button onclick="addSection(\'down\')">Add Section ↓</button></li>';
  }
	function addSection(dir) {
  var sectionsCount = $('.collapsible').length;
  var item = getListItem(sectionsCount);
  var closestLi = $(this.event.target).closest('li');
	if(dir === 'up') {
    $(closestLi).prepend(item);
  }
  if(dir === 'down') {
    $(closestLi).append(item);
  }
  handleEvents();
}


function handleEvents() {
  var coll = document.getElementsByClassName("collapsible");
  var i;
  for (i = 0; i < coll.length; i++) {
    coll[i].removeEventListener("click", function() {});
  }

  for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var content = this.nextElementSibling;
      if (content.style.display !== "none") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });
  }
}

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

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #90ee90;
}

body {
  font-size: 15px;
}

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<div id="header">
  <ul class="tabs">
    <li>
      <button onclick="addSection('up')">Add Section ↑</button>
    </li>
    <li>
      <button type="button" class="collapsible">Open Section 0</button>
      <div class="content">
        <button>upload file</button>
      </div>
    </li>
    <li>
      <button onclick="addSection('down')">Add Section ↓</button>
    </li>
  </ul>
</div>

在特定位置添加<li>

1 个答案: