0

我正在设计一个涉及slideDown 的网站。

最初我设置了一个如下图所示的模板SlideDownBefore

当我将鼠标悬停在每个黑色块上时，会显示一个ul列表...但是当我悬停时会出现问题...块下面的所有内容都会向下移动（如下图所示）

下滑后

我不能给出绝对的位置，因为上面和下面的所有内容都是浮动的（它们没有固定的高度）。那么，通过将其余内容保留在那里并在文本上显示悬停内容，还可以做些什么来获得 slideDown 呢？

4

2 回答 2

1

为了实现你想要的，你应该 slideDown() 一个内部子菜单元素而不是块本身。考虑这个示例标记：

​<div class="item" id="mybox">floating box
    <ul class="submenu" style="display: none;">
        <li>Subitem 1</li>
        <li>Subitem 2</li>
        <li>Subitem 3</li>
    </ul>
</div>
<p>More content... Just to illustrate</p>
<p>More content... Just to illustrate</p>​​​​​​

CSS 将类似于：

.​item {
    position: relative; /* to hold absolutely positioned submenu inside */
    background: #2684b7;
    color: #fff;
    padding: 10px;
    float: left;
}

    .item .submenu {
        position: absolute; /* the menu would go on top of everything */
        background: #2684b7;
        width: 100%;
        left: 0;
    }

p {
    clear: both;
}

最后，JavaScript 很简单，只是不要忘记对动画进行防弹：​</p> 

$('#mybox').hover(
    function() { /* mouseover */
        $(this).find('.submenu').slideDown();
    }, 
    function() { /* mouseout */
        $(this).find('.submenu').slideUp();
    }​​​​​
);

这是 jsFiddle 上的示例：http: //jsfiddle.net/zxrvC/

祝你好运。​</p>

​</p>

于 2012-04-17T13:22:28.650 回答
0

使用 position: relative 和 z-index:55 创建一个 div，并在该 div 内添加一个具有 position: absolute 的新 div 并给出宽度。希望这会解决。

问候

iijb

于 2012-04-17T13:05:27.783 回答