jquery - slideToggle 没有将 div 推到下方，只是重叠

Question

我正在构建一个网站，遇到了 slideToggle 的问题。我正在使用它来显示问题下的一些标签，这些标签不需要一直显示。但是具有此 slideToggle 的 div 是垂直列表的顶部 div，当我将其切换出来时，它不会将下面的 div 进一步推向页面底部。我试图清除 div 以防止任何可能阻止 slideToggle 正常工作的东西，但它仍然重叠。

CSS:

.LayoutBlockContainer {
  position:absolute;
  top:80px;
  height:auto;
  width:800px;
  left:220px;
}

.Answerblock {
  background-color:white;
  border-radius:1px;
  min-height: 200px;
  height:auto;
  width: 800px;
  /*left: 220px;*/
  display:block;
  /*padding: 20px;*/
  /*top: -1000px;*/
  position: relative;
  margin-bottom:20px;
  border-color: #D0D1D5;
  border-bottom:10px;
  display:table;
  padding-bottom:5px; 
}

.ab1 {
  width:800px;
  height:auto;
  background-color:white;
  position:relative;
  padding-bottom:22px;
  position:relative;
  top:0px; 
}

.CommentContent {
  font-family:Arial;
  word-break:normal;
  display:inline-block;
  width: 695px;
  height:auto;
  min-height: 100px;
  position:relative;
  left: 65px;
  white-space:normal; 
}

.Titletext {
  font-family:Arial;
  word-break:normal;
  display:inline-block;
  width: 695px;
  height:auto;
  min-height: 20px;
  position:relative;
  left: 65px;
  white-space:normal;
  font-weight:bold;
  font-size:1.2em;
  padding-bottom:10px;
  padding-top:10px; 
}

.CommentFooter { 
  clear: both;
  position: relative;
  height: 80px;
  width:100%;
  bottom: -20px;
  padding-bottom:5px; 
}

.expand {
  width:800px;
  background-color:white;
  left:0px;
  position:absolute;
  display:block;
  top: 50px;
  text-align:center;
  z-index:3;
  margin-bottom:100px; 
}

.expand div {
  max-width:300px; 
}

.expand .moretagcontent {
  display: none;
  padding : 5px;
  width:270px;
  max-height:200px;
  background-color:white;
  left: 260px;
  position:relative;
  bottom: 29px;
  z-index:3;
  height:auto; 
}

.showmore {
  padding: 2px;
  cursor: pointer;
  font-weight: bold;
  font-family: Arial;
  text-align: center;
  bottom: 00px;
  margin: 0 auto;
  position:relative;
  left:380px; 
}

.showmore {
  position:absolute;
  float:left;
  display:inline-block; 
}

.expand .moretagcontent {
  display: none;
  padding : 5px;
  width:270px;
  max-height:200px;
  background-color:white;
  left: 260px;
  position:relative;
  bottom: 29px;
  z-index:3;
  height:auto; 
}

.moretagcontent {
  color:black;
  font-family:Arial;
  font-size:0.8em;
  width: 240px;
  word-wrap: break-word; 
}

body {
  background-color:lightgrey; 
}

HTML:

        <div class="LayoutBlockContainer">
         <div class="Answerblock">
            <span class="Titletext"> Halp! Not working! </span>
            <div class="CommentContent"> comment content here </div>
            <div class="CommentFooter">
                <div class="expand">
                    <div class="moretagcontent">
                        #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag#tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag#tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag #tag
                    </div>
                    <div class="showmore">
                        <span>More</span>
                    </div>

                </div>
            </div>
        </div>

            <div class="ab1">

                <div class="CommentContent">
                   asdasdasdasdasdasdasdasdasd
                </div>
                <div class="CommentFooter">                
                </div>
            </div>

    </div>

这里是 the demo

谢谢!

Answer 1

这是因为 .expand 是 position: absolute 这导致它从文档流中删除因此没有注册高度/宽度。删除:

.expand {
  width:800px;
  background-color:white;
  /*position:absolute;*/ //remove
  display:block;
  text-align:center;
  margin-bottom:100px; 
}

定位元素可能会非常困惑。你应该尝试使用边距、填充、 float 、内联 block 等来做到这一点，而不是仅仅向左、向右、顶部和底部移动东西。从长远来看，它将对您有所帮助。

FIDDLE