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

Posted 2023-02-16

【中文标题】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