2
我想要做的是:當我點擊其中一個按鈕時,段落區域顯示(就像現在這樣)。但是,我希望下一個按鈕/ 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>