Question

当我的slideToggle div展开时，内容会覆盖它下方的div（.fragHeader），而不是将其向下推。我为扩展的div（.fragListMoreText）添加了一个巨大的200px底部边距（为了好玩），并且.fragHeader保持在位，而它下面的div（.fragNav）被适当地移动了。这是指向相关页面的链接（我已经消除了200px的保证金）：

http://mentalwarddesign.net/Andrea/Fragrances/baked.html

jQuery工作正常，所以我不会包含那些代码，但这里是相关的CSS：

.fragListShowHide {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 11px;
    line-height: 18px;
    font-weight: normal;
    color: #009b7b;
    width: 520px;
    height: 72px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ffffff;
}
.fragListMoreText  {
    width: 520px;
    display: none;
    margin-left: -10px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ffffff;
}
.changeTextButtonFrag  {
    display: block;
    cursor: pointer;
    float: right;
    margin-right: -10px;
}

.fragHeader {
    background-color: #FFF;
    width: 528px;
    padding-top: 10px;
    padding-right: 5px;
    padding-left: 10px;
    margin-top: 30px;
    padding-bottom: 5px;
}
.fragNav {
    height: 116px;
    width: 543px;
    background-image: url(../Fragrances/imgFrag/navFragrance.jpg);
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -o-border-bottom-right-radius: 8px;
    border-bottom-right-radius: 8px;
    overflow: hidden;
    float: left;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

这是受影响区域的html：

      <div class="fragListShowHide" id="baked">ANGEL FOOD CAKE | APPLE CRISP | APPLE PIE | BAKED BREAD | BANANA CREAM PIE | BANANA NUT BREAD | BLUEBERRY CHEESECAKE | BLUEBERRY MUFFIN | BLUEBERRY PIE | CARROT CAKE | CHERRY COBBLER | CINNAMON BUNS | CINNAMON TOAST | COOKIE | DONUT | FUDGE BROWNIE | GINGERBREAD | GINGERSNAP | GRAHAM CRACKERS | KEY 
      <div class="fragListMoreText">LIME PIE | LEMON MERINGUE | NUT BREAD | NUT CAKE | PEACH COBBLER | PINEAPPLE UPSIDE DOWN CAKE | PLUM PUDDING | PUMPKIN PIE | SEX ON THE BEACH | SNICKER DOODLE | STRAWBERRY | CHEESECAKE | SUGAR COOKIE | VANILLA WAFER | WEDDING CAKE
       <!-- end .fragListMoreText --></div>
      <img src="../imgGlobal/more-button.png" width="51" height="16" class="changeTextButtonFrag" alt="textButton">
      <!-- end .fragListShowHide --></div>
   <div class="fragHeader">
        <h2>OUR FRAGRANCE CATEGORIES</h2>
        <p>Andrea Aromatics' custom fragrance categories are designed around familiar olfactory themes. With hundreds of individual fragrances overall, we cover practically every scent under the sun.</p>
      <!-- end .fragHeader --></div>
    <div class="fragNav" style="left: 101px; top: 265px;">
      <div class="fragNavRow1"><ul class="frag">
      <li class="chosenSub"><a href="../Fragrances/baked.html">Baked Goods</a></li>
      <li><a href="../Fragrances/floral.html">Florals</a></li>
      <li><a href="../Fragrances/nuts.html">Nuts</a></li>
      </ul>
      <!-- end .fragNavRow1 --></div>
      <div class="fragNavRow2"><ul class="frag">
      <li><a href="../Fragrances/beverage.html">Beverage</a></li>
      <li><a href="../Fragrances/fruit.html">Fruits</a></li>
      <li><a href="../Fragrances/outdoor.html">Outdoor</a></li>
      </ul>
      <!-- end .fragNavRow2 --></div>
      <div class="fragNavRow3"><ul class="frag">
      <li><a href="../Fragrances/designer.html">Designer</a></li>
      <li><a href="../Fragrances/holiday.html">Holiday</a></li>
      <li><a href="../Fragrances/spiceherb.html">Spice & Herb</a></li>
      </ul>
      <!-- end .fragNavRow3 --></div>
      <div class="fragNavRow4"><ul class="frag">
      <li><a href="../Fragrances/exotic.html">Exotic</a></li>
      <li><a href="../Fragrances/novelty.html">Novelty</a></li>
      <li><a href="../Fragrances/trees.html">Trees</a></li>
      </ul>
      <!-- end .fragNavRow3 --></div>
      <!-- end .fragNav --></div>

感谢您的帮助！

Answer 1

不确定，但尝试更改

.fragListShowHide {
   ....
   height: auto;
}

我认为，这应该会有所帮助。

Answer 2

您已经对父元素的高度（fragListShowHide）进行了硬编码，因此即使显示嵌套元素，父容器div的高度仍为72，这意味着不会移动任何内容来容纳更大的内容。

从fragListShowHide中删除绝对高度或将fragListMoreText移到外面。

如果使用firebug，你可以清楚地看到发生了什么，并查看div大小。

当通过jQuery slideToggle扩展相邻div时，Div不会移动

2 个答案: