从第一个按钮下拉菜单后移动下一个按钮

Question

我想要做的是：当我点击其中一个按钮时，段落区域显示（就像现在这样）。但是，我希望下一个按钮/ div（以及其下面的页面的其余部分）向下移动。为了简单起见：当我点击按钮时，框显示，而向下移动其余按钮，所以段落区域不会与其他区域重叠。

对不起英语很抱歉... 我希望你们明白我的意思。 （顺便说一句，我不希望有一个框架或Jquery的，只是普通的语言;））

我有下面的代码：

function dropDownOne() { 
 
    document.getElementById("dropdownone").classList.toggle("show"); 
 
} 
 

 
function dropDownTwo() { 
 
    document.getElementById("dropdowntwo").classList.toggle("show"); 
 
} 
 

 
function dropDownThree() { 
 
    document.getElementById("dropdownthree").classList.toggle("show"); 
 
} 
 

 
window.onclick = function(event) { 
 
    if(!event.target.matches('.dropdownbtn')) { 
 

 
     let dropDowns = document.getElementsByClassName("dropdown-content"); 
 
     for (var i = 0; i < dropDowns.length; i++) { 
 
      let openDropDown = dropDowns[i]; 
 
      if (openDropDown.classList.contains('show')) { 
 
       openDropDown.classList.remove('show'); 
 
      } 
 
     } 
 
    } 
 
}

.dropdownbtn { 
 
    border: 0; 
 
    background-color: gray; 
 
    width: 50%; 
 
    height: 40px; 
 
    border-radius: 5px; 
 
    font-size: 15px; 
 
    color: black; 
 
    cursor: pointer; 
 
    -webkit-transition-duration: 300ms; 
 
    -moz-transition-duration: 300ms; 
 
    -ms-transition-duration: 300ms; 
 
    -o-transition-duration: 300ms; 
 
    transition-duration: 300ms; 
 
} 
 

 
.dropdownbtn:hover, .dropdownbtn:focus { 
 
    background-color: blue; 
 
    color: white; 
 
    border: 1px solid white; 
 
    -webkit-transition-duration: 300ms; 
 
    -moz-transition-duration: 300ms; 
 
    -ms-transition-duration: 300ms; 
 
    -o-transition-duration: 300ms; 
 
    transition-duration: 300ms; 
 
} 
 

 
.dropdown { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 10px auto; 
 
    width: 80%; 
 
    text-align: center; 
 
} 
 

 
.dropdown:last-child { 
 
    margin-bottom: 20px; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: blue; 
 
    width: 80vw; 
 
    margin: 0 auto; 
 
    border: 1px solid white; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content p { 
 
    color: white; 
 
    font-size: 15px; 
 
    display: block; 
 
} 
 

 
.show { 
 
    display: block; 
 
    margin-bottom: 200px; 
 
}

<div class="dropdown"> 
 
      <button onclick="dropDownOne()" class="dropdownbtn">Who am I?</button> 
 
      <div id="dropdownone" class="dropdown-content"> 
 
       <p> 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti 
 
        dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam 
 
        recusandae rem sunt, temporibus velit. 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
      <button onclick="dropDownTwo()" class="dropdownbtn">What are your skills?</button> 
 
      <div id="dropdowntwo" class="dropdown-content"> 
 
       <p> 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti 
 
        dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam 
 
        recusandae rem sunt, temporibus velit. 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
      <button onclick="dropDownThree()" class="dropdownbtn">Who am I?</button> 
 
      <div id="dropdownthree" class="dropdown-content"> 
 
       <p> 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti 
 
        dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam 
 
        recusandae rem sunt, temporibus velit. 
 
       </p> 
 
      </div> 
 
     </div>

Answer 1

所以，你的问题是，你正在使用position : absolute;在你的dropdown-content类，因为它有一个绝对的位置，这意味着该元素将采取其位置，无论其他任何元素，这就是为什么你的其他元素没有移动。

要解决这个问题，我将其更改为position: relative;，以便其他元素将其考虑在内。

我还在show类中删除了margin-bottom: 200px;，因为这会在每个元素之间留下很大的空白。

以下是在一个片段中的编辑的代码：

function dropDownOne() { 
 
    document.getElementById("dropdownone").classList.toggle("show"); 
 
} 
 

 
function dropDownTwo() { 
 
    document.getElementById("dropdowntwo").classList.toggle("show"); 
 
} 
 

 
function dropDownThree() { 
 
    document.getElementById("dropdownthree").classList.toggle("show"); 
 
} 
 

 
window.onclick = function(event) { 
 
    if(!event.target.matches('.dropdownbtn')) { 
 

 
     let dropDowns = document.getElementsByClassName("dropdown-content"); 
 
     for (var i = 0; i < dropDowns.length; i++) { 
 
      let openDropDown = dropDowns[i]; 
 
      if (openDropDown.classList.contains('show')) { 
 
       openDropDown.classList.remove('show'); 
 
      } 
 
     } 
 
    } 
 
}

.dropdownbtn { 
 
    border: 0; 
 
    background-color: gray; 
 
    width: 50%; 
 
    height: 40px; 
 
    border-radius: 5px; 
 
    font-size: 15px; 
 
    color: black; 
 
    cursor: pointer; 
 
    -webkit-transition-duration: 300ms; 
 
    -moz-transition-duration: 300ms; 
 
    -ms-transition-duration: 300ms; 
 
    -o-transition-duration: 300ms; 
 
    transition-duration: 300ms; 
 
} 
 

 
.dropdownbtn:hover, .dropdownbtn:focus { 
 
    background-color: blue; 
 
    color: white; 
 
    border: 1px solid white; 
 
    -webkit-transition-duration: 300ms; 
 
    -moz-transition-duration: 300ms; 
 
    -ms-transition-duration: 300ms; 
 
    -o-transition-duration: 300ms; 
 
    transition-duration: 300ms; 
 
} 
 

 
.dropdown { 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 10px auto; 
 
    width: 80%; 
 
    text-align: center; 
 
} 
 

 
.dropdown:last-child { 
 
    margin-bottom: 20px; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: relative; 
 
    right: 0; 
 
    left: 0; 
 
    background-color: blue; 
 
    width: 80vw; 
 
    margin: 0 auto; 
 
    border: 1px solid white; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content p { 
 
    color: white; 
 
    font-size: 15px; 
 
    display: block; 
 
} 
 

 
.show { 
 
    display: block; 
 
}

<div class="dropdown"> 
 
      <button onclick="dropDownOne()" class="dropdownbtn">Who am I?</button> 
 
      <div id="dropdownone" class="dropdown-content"> 
 
       <p> 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti 
 
        dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam 
 
        recusandae rem sunt, temporibus velit. 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
      <button onclick="dropDownTwo()" class="dropdownbtn">What are your skills?</button> 
 
      <div id="dropdowntwo" class="dropdown-content"> 
 
       <p> 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti 
 
        dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam 
 
        recusandae rem sunt, temporibus velit. 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="dropdown"> 
 
      <button onclick="dropDownThree()" class="dropdownbtn">Who am I?</button> 
 
      <div id="dropdownthree" class="dropdown-content"> 
 
       <p> 
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab commodi consequuntur delectus deleniti 
 
        dignissimos ea eveniet excepturi id impedit, maiores maxime obcaecati officiis quaerat, quam 
 
        recusandae rem sunt, temporibus velit. 
 
       </p> 
 
      </div> 
 
     </div>