Javascript 可折叠框不显示html和css中的所有文本_Javascript_Html_Css

Javascript 可折叠框不显示html和css中的所有文本

javascript html css

Javascript 可折叠框不显示html和css中的所有文本,javascript,html,css,Javascript,Html,Css,我不想假装聪明，在这个问题上我很愚蠢。我有一个可折叠的盒子，当它打开时，里面还有两个盒子，里面的盒子都没有显示它应该是什么。但是，如果我打开里面的框，然后关闭里面的框，然后重新打开它，它会显示我的所有文本。有人能帮我修一下吗，这样他们就不用打开盒子两次了 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initi

我不想假装聪明，在这个问题上我很愚蠢。我有一个可折叠的盒子，当它打开时，里面还有两个盒子，里面的盒子都没有显示它应该是什么。但是，如果我打开里面的框，然后关闭里面的框，然后重新打开它，它会显示我的所有文本。有人能帮我修一下吗，这样他们就不用打开盒子两次了

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.a {
    text-align: center;
}

<div class="a">

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

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

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
  height: 360px;
}

</style>
</head>
<body>
<div class="a">
<h1> Staffs</h1>
<button class="collapsible"> Staff guides here</button>
<div class="content">
<p>Ice</p>
<button class="collapsible">Building</button>
<div class="content">
<p><style>
div.a {
    text-align: center;
}
</style>
<div class="a">
<h1>This solution breaks the transition effect, but fixes the problem. You'll need to find another way to apply the transition effect.
Set content.style.maxHeight
 to "fit-content"
.
Set height
 of .collapsible
 to auto
.
Remove the stray <div class='a'>
 tag that is sitting inside the <style>
 tag. (How did that get there?)
The problem is that you lock the height of .content
 to a fixed pixel value at the time you open the box. This is needed for the transition effect you use, but creates the problem you describe.
A possible workaround is to set the height to a variable amount after the transition effect.


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.maxHeight) {
      content.style.maxHeight = content.scrollHeight + "px";
      setTimeout(function() {
        content.style.maxHeight = null;
      }, 50)
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
      setTimeout(function() {
        content.style.maxHeight = "fit-content";
      }, 250)
    }
  });
}

a组{
文本对齐：居中；
}
.可折叠{
背景色：#777；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
身高：100%；
}
.活动，.可折叠：悬停{
背景色：#555；
}
.可折叠：之后{
内容：“\002B”；
颜色：白色；
字体大小：粗体；
浮动：对；
左边距：5px；
}
.活动：之后{
内容：“\2212”；
}
.内容{
填充：0 18px；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
背景色：#f1f1；
高度：360px；
}
职员
这里有工作人员指南
冰
建筑

a组{
文本对齐：居中；
}
此解决方案打破了过渡效果，但解决了问题。您需要找到另一种方法来应用过渡效果
将content.style.maxHeight
设置为“适合内容”

将的高度
设置为自动

移除位于
标签内的杂散
标签。（这是如何实现的？
问题在于，在打开框时，将.content
的高度锁定为固定的像素值。这是您使用的过渡效果所必需的，但会造成您描述的问题
一种可能的解决方法是在过渡效果后将高度设置为可变量

var coll=document.getElementsByClassName（“可折叠”）；
var i；
对于（i=0；i

a分部{
文本对齐：居中；
}
.可折叠{
背景色：#777；
颜色：白色；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
高度：自动；
}
.主动，
.可折叠：悬停{
背景色：#555；
}
.可折叠：之后{
内容：“\002B”；
颜色：白色；
字体大小：粗体；
浮动：对；
左边距：5px；
}
.活动：之后{
内容：“\2212”；
}
.内容{
填充：0 18px；
溢出：隐藏；
过渡段：最大高度0.2s放松；
背景色：#f1f1；
高度：自动；
最大高度：0；
}

职员
这里有工作人员指南
冰
建筑

你能帮我做一个梦吗？有时候，隔离问题可以帮助你自己解决问题。@swimerf这是一个重复的例子。只需将其复制并粘贴到测试环境中，如JSFIDLE或JSBin。@AezignSpace REPLATIABLE？对最小的不，为什么它不是最小的？它具有运行所需的CSS和HTML，以及一些示例内容。没有额外内容。@AezignSpace在您的答案中指出的样式标记中有一个零散的
。事实证明，这与手头的问题无关，但在提交问题之前整理代码是一种很好的做法。