Question

谁能看到我在这里做错了什么？我希望内容扩展，并在显示隐藏的div时将其下方的页脚向下推。这是一个例子。不要介意可怕的颜色： http://www.kerrydean.ca/MATHESON/home5.html

CSS

.valveMenuWraps {
    background-color: #990;
    margin: 9px;
    float: left;
    height: 40px;
    width: 170px;
    overflow: hidden;
    padding: 5px;
    position: relative;
}
#valveMenu {
    background-color: #FFF;
    position: relative;
    height: 75px;
    width: 795px;
    left: 4px;
}

HTML

<div id="content">
    <div id="picMenu">
    <div id="first" class="pics"></div>
    <div id="second" class="pics"></div>
    <div id="third" class="pics"></div>
    <div id="fourth" class="pics" ></div>
    </div><!--end of pic menu-->
    <div id="valveMenu">
    <div id="controlWrap" class="valveMenuWraps">
    <div id="control"  style="position:relative">
    <p>
    vee ball<br />
    butterfly control<br />
    rotary eccentric plug<br />
    globe
    </p>
    </div></div>
    <div id="safteyWrap" class="valveMenuWraps">
    <div id="saftey" style="position:relative"></div></div>
    <div id="automatedWrap" class="valveMenuWraps">
    <div id="automated"></div></div>
    <div id="manualWrap" class="valveMenuWraps">
    <div id="manual">
    <p>soft seated ball valves<br />
        high performance butterfly valves<br />
        resilinet seated butterfly valves<br />
        metal seated ball valve<br />
        triple offset butterfly valves<br />
        multi-port ball valves<br />
        gate, globe, check valves<br />
        specialty check valves<br />
        knife gate valves<br />
        diaphram valves<br />
        pinch valves</p>
    </div></div>
    </div><!--end of valveMenu-->
    <div id="footer"><a href="test.html">HOME</a> | <a href="test.html">CONTACT US</a></div>
</div><!--end of content-->

和jQuery

$(document).ready(function(){

    //When mouse rolls over
    $("#controlWrap").mouseover(function(){
        $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("#controlWrap").mouseout(function(){
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

谢谢！这个网站太棒了！

Answer 1

我添加了一个浮点数：左边是#content和#footer，它运行正常。

Answer 2

你需要做几件事。将#valveMenu的CSS更改为

#valveMenu {
    background-color: #FFFFFF;
    clear: both;
    left: 4px;
    overflow: auto;
    position: relative;
    width: 795px;
}

这应该会让它压下页脚。

我删除了高度。并添加了溢出。

我希望JQuery Animate在扩展时推送内容

2 个答案: