Javascript 添加<；李>；在特定的地方

我试图实现以下目标：我想让用户能够在上面或后面添加分区，每个分区都可以展开，在每个分区内，用户都可以在上面或后面添加文件。如图所示：

例如，如果用户希望在上面添加一个部分，它将如下所示：

现在，我的代码总是将部分添加到末尾，我的代码如下：

函数addSection（）{
$（“#页眉ul”）。追加(
'添加节
打开节1加载文件
添加节
'
);
把手通风孔（）；
}
函数handleEvents（）{
var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

。可折叠{
背景色：#777；
颜色：白色；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
光标：指针；
}
.内容{
填充：0 18px；
显示：无；
溢出：隐藏；
背景色：#90ee90；
}
身体{
字体大小：15px；
}

添加节


开放式第一节
上传档案


添加节

在使用当前代码执行此操作之前，我们需要先改进的地方很少

• 您需要知道您正在按下的

  addSection

  按钮的类型以及意图。是一个按钮想要在上面创建一个部分，还是一个按钮想要在下面创建一个部分。关于如何传达这一点，你可以做以下几点
  • 您可以决定向按钮添加数据属性，然后在单击事件发生时读取该数据属性
  • 您可以决定向函数

    addSection

    传递一个参数，该参数将告诉您单击的意图
• 您可以使用jQuery实用程序将

  附加

  或

  预附加

  添加到同级节。要查找同级部分，可以使用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();
}

如果您想演奏小提琴，可以在此处找到完整的工作演示：

函数getListItem（SectionScont）{
返回“
添加节”↑
打开节“+sectionScont+”上载文件
添加节↓'；
}
函数addSection（dir）{
var sectionScont=$（'.collapsable'）。长度；
var项目=getListItem（SectionScont）；
var closestLi=$（this.event.target）.closest（'li'）；
如果（dir==='up'）{
$（closestLi）.预结束（项目）；
}
如果（dir==='down'）{
$（closestLi）.追加（项目）；
}
把手通风孔（）；
}
函数handleEvents（）{
var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

。可折叠{
背景色：#777；
颜色：白色；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
光标：指针；
}
.内容{
填充：0 18px；
显示：无；
溢出：隐藏；
背景色：#90ee90；
}
身体{
字体大小：15px；
}

添加节↑


开放部分0
上传档案


添加节↓