jQuery:菜单在内容顶部向下滑动,而不是向下推送内容
Posted
技术标签:
【中文标题】jQuery:菜单在内容顶部向下滑动,而不是向下推送内容【英文标题】:jQuery: Menu Slide Down on top of content, not push content down 【发布时间】:2011-08-12 18:29:52 【问题描述】:目前这个顶部菜单应该一直延伸到 100%,当点击和展开时,它似乎只是向下滑动并将页面的其余内容向下推。
我希望菜单向下,但不是将整个页面向下推,而是坐在页面顶部并向下展开必要的程度。
$(document).ready(function()
// Expand Panel
$("#open").click(function()
$("div#blurbPanel").slideToggle("slow");
);
// Collapse Panel
$("#close").click(function()
$("div#blurbPanel").slideToggle("slow");
);
$("#toggle a").click(function ()
$("#toggle a").toggle();
);
);
我做错了什么?
【问题讨论】:
你能把你的html也贴在这里 【参考方案1】:您可以将 z-index 和 position 属性添加到菜单 css。 Z-index 让 HTML 知道元素的层位置。为了让z-index正常工作,你需要指定元素的位置,这样它就知道如何处理周围的元素了。
我会尝试:
.menu
position:relative;
z-index:3;
这可能行得通,但是如果没有看到 HTML,这有点难以提供帮助。
【讨论】:
【参考方案2】:我查看了该网站,我认为它只是一个 CSS 问题。我创建了一个可以满足您要求的小提琴。面板具有绝对位置,因此将在其他元素上打开。我也稍微改变了你的JS。到这个
$('#open-close-toggle').click(function()
$('#toggle-section').slideToggle();
var buttonText = $(this).html();
if(buttonText == "Open")
$(this).html("Close");
else
$(this).html("Open");
);
Here is the fiddle example
【讨论】:
以上是关于jQuery:菜单在内容顶部向下滑动,而不是向下推送内容的主要内容,如果未能解决你的问题,请参考以下文章