Question

我使用网页中的可折叠元素，因此我创建了一个具有一些数据的可折叠按钮。

但是当我按下按钮“打开可协作” 时，在图片中，您可以在按“打开” 后转到中页中的框。下来，我不想。

示例：

因此，您可以看到并生动描述页面上的所有元素都掉了。所以我不想要这个。我的代码：

    var coll = document.getElementsByClassName("collapsible");

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function () {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
                document.getElementById('colapse').innerHTML = 'Open';
            } else {
                content.style.display = "block";
                document.getElementById('colapse').innerHTML = 'Colapse';
            }
        });
    }

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 8px;
  text-align: center;
  width: 100%;
  border: none;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}
.content {
  display: none;
  overflow: hidden;
}

    <button class="collapsible" id="colapse">Open</button>
    <div class="content">
        Some dataSome data
        Some data
        Some data<br />
        Some data<br /> Some data<br /> Some data<br /> Some data<br /> Some data<br />
    </div>

有些想法如何解决？

Answer 1

检查出来。.它的运行就像您想要的

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
margin-top:30%;
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 25%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  margin-left:40%;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>
</head>
<body>


<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>


<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

</body>
</html>

希望对您有帮助

Answer 2

通过更改CSS文件修复：

.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 8px;
    text-align: center;
    width: 100%;
    border: none;
    outline: none;
    font-size: 15px;
}

    .active, .collapsible:hover {
        background-color: #555;
    }

.content {
    width: 100%;
    background-color: white;
    position: absolute;
    display: none;
    overflow: hidden;
}

JS如何修复位置可折叠元素？

2 个答案: