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:菜单在内容顶部向下滑动,而不是向下推送内容的主要内容,如果未能解决你的问题,请参考以下文章

jQuery - 垂直向上切换(即不向下)

使用 Jquery 的翻转效果

使用 jquery 修复顶部的菜单。向下滚动时以后不会出现菜单?

如何制作正确的 jQuery 向下滑动菜单?

Lion 全屏菜单栏不向下滑动

使用 jQuery 同时向下滑动 div 和 .fadeIn() 内容,反之亦然?