從第一個按鈕下拉菜單後移動下一個按鈕

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>