javascript - 在按钮下方垂直对齐 div 的内容

Question

我有这个设置JSFiddle我需要点击 Button 下的 Button 2(Point 3、Point 4)后出现的 Points 2，而不是在 Button 1 下。

我该如何实现？

var myButton = document.getElementById("myButton");
var dropdDown = document.getElementById("dropdown");

(function() {

  "use strict";

  dropdownExpander(myButton, dropdDown);

  function dropdownExpander(bdropdown, dContent) {
    bdropdown.addEventListener("click", function(e) {
      e.preventDefault();
      if (dContent.classList.contains("is-active") === true) {
        dContent.classList.remove("is-active");

      } else {
        dContent.classList.add("is-active");
      }
    });
  }

})();


var myButton = document.getElementById("myButton2");
var dropdDown = document.getElementById("dropdown2");

(function() {

  "use strict";

  dropdownExpander(myButton, dropdDown);

  function dropdownExpander(bdropdown, dContent) {
    bdropdown.addEventListener("click", function(e) {
      e.preventDefault();
      if (dContent.classList.contains("is-active") === true) {
        dContent.classList.remove("is-active");

      } else {
        dContent.classList.add("is-active");
      }
    });
  }

})();

.parentDiv {
  display: inline-blick;
}
#myButton {
  padding: 5px;
}
.childDiv {
  display: none;
  position: absolute;
  padding-right: 5px;
}
.childDiv.is-active {
  display: block;
}

<div class="parentDiv">
  <button type="button" id="myButton">Button 1</button>
  <div class="childDiv" , id="dropdown">
    <div class="cont">Point 1</div>
    <div class="cont">Point 2</div>
  </div>

  <button type="button" id="myButton2">Button 2</button>
  <div class="childDiv" , id="dropdown2">
    <div class="cont">Point 3</div>
    <div class="cont">Point 4</div>
  </div>
</div>

Answer 1

使用此代码

<div class = "parentDiv"> 
<div style='float:left'>

<button type="button" id = "myButton">Button 1</button>
      <div class = "childDiv", id = "dropdown"> 
          <div class = "cont"> Point 1</div>
          <div class = "cont"> Point 2</div>
      </div>
</div>
<div style='float:left'>
      <button type="button" id = "myButton2">Button 2</button>
      <div class = "childDiv", id = "dropdown2"> 
          <div class = "cont"> Point 3</div>
          <div class = "cont"> Point 4</div>
      </div>
      </div>
</div>