3

我有这个代码，

HTML

<div id="header-line"></div>
<div id="main-menu"></div>
<div id="content"></div>

CSS

#header-line {
    height: 20px;
    background-color: black;
    top:0;
    left:0;
}
#main-menu {
    height: 30px;
    background-color: green;
}
#content {
    background-color: blue;
    height: 200px;
}

Javascript

$("#main-menu").hover(function () {
    $(this).stop(true, false).animate({
        height: "100px"
    });
}, function () {
    $(this).stop(true, false).animate({
        height: "30px"
    });
});

演示 jsFiddle

我用 jQueryanimate函数使中间的 DIV 扩展了它的高度。但这样做的问题是它压低了底部的 DIV。

如何让它在底部 DIV 上展开而不向下推？

4

6 回答 6

5

将html更改为

 <div id="header-line"></div>
 <div id="content">
     <div id="main-menu">Expands on hover</div>
 </div>

将 jquery 更改为

$("#main-menu").hover(function () {
    $(this).stop(true, false).animate({
        height: "100px"
    });
}, function () {
    $(this).stop(true, false).animate({
        height: "30px"
    });
});

将样式更改为

#header-line {
    height: 20px;
    background-color: black;
    top:0;
    left:0;
}
#main-menu {
    height: 30px;
    background-color: green;
    position:relative;
    z-index:3;
}
#content {
    background-color: blue;
    height: 200px;
}

主要目的是将 div 放入另一个 div 中，然后它不会将底部 div 放下。

工作小提琴。

于 2013-06-21T07:35:30.907 回答
1

这是一个css问题，你必须添加 position: absolute; 到绿色 DIV，但您必须固定宽度：测试

#main-menu {
    height: 30px;
    background-color: green;
    position: absolute;
}
于 2013-06-21T07:36:05.467 回答
1

你想要做的可以通过将两个元素包装在一个包装器中来实现position:relative

通过这种方式，您可以绝对定位子元素、内容区域和父元素（新 div）中的扩展栏

通过将它们设置为绝对，它们将保持原位，并且扩展的 div 将基本上与下面的内容重叠：

这里的例子http://jsfiddle.net/JuG6X/6/

于 2013-06-21T07:37:05.943 回答
1

给你，你只需要为内容 div 设置新的高度。( #content)

http://jsfiddle.net/JuG6X/

于 2013-06-21T07:37:07.070 回答
1

像这样：

#header-line {
    height: 20px;
    background-color: black;
    top:0;
    left:0;
}
#parent{
    position:relative;
}
#main-menu {
    height: 30px;
    background-color: green;
    width:100%;
    position:absolute;
    top:0;
    z-index:100;
}
#content {
    background-color: blue;
    height: 200px;
    width:100%;
    position:absolute;
    /* take into account : borders, margin, previous sibling height */
    top:30px;
}

http://jsfiddle.net/techunter/7ytgy/

这是众多解决方案中的一种。您需要添加一个#parent具有相对定位的父级，它将作为其子级的参考。

于 2013-06-21T07:39:27.993 回答
1

在你的css中试试这个，

#header-line {
    height: 20px;
    background-color: black;
    top:0;
    left:0;
}
#main-menu {
    height: 30px;
    background-color: green;
    z-index:1;
    position:relative;
}
#content {
    background-color: blue;
    height: 200px;
    z-index:0;
    top:50px;
    position:absolute;
    width:100%;
}

工作小提琴 http://jsfiddle.net/JuG6X/14/

于 2013-06-21T07:40:05.677 回答