当div div通过jQuery展开时div不移动slideToggle

当我的slideToggle div展开时，内容覆盖它下面的div（.fragHeader）而不是将其压下。我为扩展div（.fragListMoreText）添加了一个巨大的200px底部边距（为了好玩），并且.fragHeader保持原位，而它下面的div（.fragNav）被适当移动。这里是有问题的网页的链接（我已经消除了为200px保证金）：当div div通过jQuery展开时div不移动slideToggle

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>

感谢任何及所有对你有所帮助！

来源

2012-11-30 Ed Ward

您已经硬编码父元素的高度（fragListShowHide），因此即使显示嵌套元素，父容器div的高度仍然为72，这意味着无法移动以容纳较大的内容。

从fragListShowHide中移除绝对高度或移除fragListMoreText。

如果您使用萤火虫，并查看div大小，您可以清楚地看到发生了什么。

来源

2012-11-30 21:54:15 ernie

谢谢厄尼。从印刷设计来看，我对编码颇为陌生。我感谢您的帮助！我原本有这个div的溢出滚动，直到我意识到这不适用于平板电脑，所以我去了jQuery。当我改变样式表时，我删除了溢出，但显然错过了固定的高度。再次感谢！ –

不知道，但尝试改变

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

我认为，应该帮助。

来源

2012-11-30 21:41:49 Boris

谢谢bborisovs。这可能也会起作用，但正如我从Ernie的回答中了解到的，在这种情况下，高度属性是不必要的。感谢您花时间回答我的问题。 –

当div div通过jQuery展开时div不移动slideToggle

回答

相关问题