javascript - 从第一个按钮下拉后移动下一个按钮

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

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

为了解决这个问题，我将其更改为 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>