javascript - 单击按钮会折叠所有 div，而不是折叠它所属的 div

Question

所以，我有一个 div，其中包含一个下拉列表、几个输入字段和一个名为“添加过程”的按钮。

当用户单击“添加过程”时，将为用户可能想要添加的新过程添加相同的 div(我尽可能地使用类)。

我似乎无法弄清楚的是，当用户单击“添加过程”时，它应该折叠(BS3 折叠)该特定 div 并在下面添加一个 div(如我们之前提到的)。但它正在折叠或展开所有 div，而不仅仅是那个 div，我猜是因为相同的类名？

所以，我下面的JS代码只是添加新字段(或div)，但我不知道如何在单击ITS按钮时折叠div。我尝试创建所有 div 和随后添加的“添加过程”按钮的列表。并循环它但它不起作用(没有显示错误)。

我添加了下面尝试的方法之一，但该方法不起作用。关于如何修复它有什么想法吗？我已经到处搜索类似的问题。

HTML:

  <div class="list col-xs-6">
    <div class="dropdown">
      <input type="text" placeholder="Add procedure name" id="add-proc">
    </div>
  </div>

  <div class="list col-xs-6">
    <div class="dropdown">
      <select name="list2" class="dropdown-select" onchange="hideorshow()" id="list2" class="list2">
                                <option value="1" selected>To be done </option>
                                <option value="2">Done</option>
                                <option value="3">Make note</option>
                            </select>
    </div>
  </div>

  <br>
  <br>

  <div class="panel panel-default panel-group">
    <div class="panel-heading">
      <span class="panel-title" data-toggle="collapse" href="#collapse1">
                                <i class="fa fa-plus"></i>
                            </span>
    </div>
    <div class="panel-collapse collapse-in" id="collapse1">
      <div class="panel-body">
        <div class="cost">
          <input type="number" placeholder="Add cost" class="add-cost" min="0">
        </div>
        <div class="form-group appointment">
          <div class="input-group datetimepicker">
            <input type="text" class="form-control" readonly>
            <span class="input-group-addon">
                                            <span class="fa fa-calendar"></span> +
            <span class="fa fa-clock-o"></span>
            </span>
          </div>
        </div>
        <div class="col-xs-6 row">
          <div class="specific-inputdiv">
            <input type="text" placeholder="Add your note here" class="specific-input">
          </div>

        </div>
        <div class="col-xs-6">
          <div class="procedure">
            <input type="button" class="btn btn-default add_fields_btn" class="add-proc2" onclick='add_fields();' value="Add new procedure">
          </div>
        </div>
      </div>
    </div>
  </div>



  <div id="add_field" class="col-xs-12"></div>
  <div class="col-xs-12">
    <input type="submit" class="btn btn-success" id="submit" value="Submit" name="job_submit">

  </div>


</div>

JS:

var listOfCollapse = document.getElementsByClassName("collapse-in");
var listOfAddBtn = document.getElementsByClassName("add_fields_btn");
var room = 1;

function add_fields() {


  room++;
  var objTo = document.getElementById('add_field');
  var divtest = document.createElement("div");
  divtest.innerHTML = '<div class="row"> <div class="list col-xs-6"> <div class="dropdown"> <input type="text" placeholder="Add procedure name" id="add-proc"> </div> </div> <div class="list col-xs-6"> <div class="dropdown"> <select name="list2" class="dropdown-select" onchange="hideorshow()" id="list2" class="list2"> <option value="1" selected>To be done </option> <option value="2">Done</option> <option value="3">Make note</option> </select> </div> </div> <br> <br> <div class="panel panel-default panel-group"> <div class="panel-heading"> <span class="panel-title" data-toggle="collapse" href="#collapse1"> <i class="fa fa-plus"></i> </span> </div> <div class="panel-collapse collapse-in" id="collapse1"> <div class="panel-body"> <div class="cost"> <input type="number" placeholder="Add cost" class="add-cost" min="0"> </div> <div class="form-group appointment"> <div class="input-group datetimepicker"> <input type="text" class="form-control" readonly> <span class="input-group-addon"> <span class="fa fa-calendar"></span> + <span class="fa fa-clock-o"></span> </span> </div> </div> <div class="col-xs-6 row"> <div class="specific-inputdiv"> <input type="text" placeholder="Add your note here" class="specific-input"> </div> </div> <div class="col-xs-6"> <div class="procedure"> <input type="button" class="btn btn-default add_fields_btn" class="add-proc2" onclick="add_fields();" value="Add new procedure"> </div> </div> </div> </div> </div> </div>';
  objTo.appendChild(divtest);
}

/*Code to collapse or uncollapse a div, which is collapsing every div on any button click not just that particular button's div*/

for (var i = 0, len = listOfCollapse.length; i < len; i++) {

    var collapseItem = listOfCollapse[i];

    $(collapseItem).collapse('toggle'); 
    // Tried this too instead ->  $(collapseItem).closest('.collapse-in').collapse('toggle'); 
    }

Answer 1

您需要将元素作为参数传递给 add_fields()，以便您可以对其调用 collapse():

onclick="add_fields(this)"

然后:

function add_field(elem) {
    $(elem).closest(".collapse-in").collapse("toggle");
    // rest of code that adds new fields
}