2
私がしたいことは：ボタンの1つをクリックすると、段落領域が（今のように）表示されます。しかし、次のボタン/ 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>