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;，以便其他元素考虑其位置。

我还删除了margin-bottom: 200px;课程中的show，因为如果您的元素存在差异，那么这会留下很大的差距。

以下是代码段中已编辑的代码：

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>

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

1 个答案: