Verschieben Sie die nächste Schaltfläche nach dem Dropdown von der ersten Schaltfläche

Question

Was ich tun möchte, ist: Wenn ich auf eine der Schaltflächen klicken, wird der Absatzbereich angezeigt (wie es jetzt ist). Ich möchte jedoch den nächsten Button/div (und den Rest der Seite darunter) nach unten bewegen. Um es ganz einfach zu machen: Wenn ich auf den Knopf klicke, wird das Feld angezeigt, während der Rest der Knöpfe nach unten bewegt wird, so dass der Absatzbereich die anderen nicht überlappt.

Es tut mir leid für die schlechte Englisch ... Ich hoffe euch verstehen, was ich meine. (Btw ich will nicht ein Rahmen oder JQuery, einfach nur Sprachen;))

Ich habe den folgenden Code bekam:

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

Also Ihr Problem war, das Sie verwenden position : absolute; auf Ihrer dropdown-content Klasse, weil es eine absolute Position hat, bedeutet dies, dass das Element seine Position unabhängig von anderen Elementen einnehmen wird, weshalb Ihre anderen Elemente nicht verschoben wurden.

Um das zu beheben, habe ich es in position: relative; geändert, damit andere Elemente seine Position berücksichtigen.

Ich auch margin-bottom: 200px; in der show Klasse entfernt, da dies große Lücken zwischen jedem Ihrer Elemente verlassen würde. Hier

ist der bearbeitete Code in einem Code-Schnipsel:

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>