jQuery：菜单在内容顶部向下滑动，而不是向下推送内容答案

【问题标题】：jQuery: Menu Slide Down on top of content, not push content downjQuery：菜单在内容顶部向下滑动，而不是向下推送内容
【发布时间】：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也贴在这里

标签： jquery menubar slidetoggle

【解决方案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

【讨论】：