Question

目前这个顶级菜单应该一直延伸到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();
    });     
});

我做错了什么？

Answer 1

您可以将z-index和位置属性添加到菜单css。 Z-index让HTML知道元素的图层位置。为了使z-index正常工作，您需要指定元素位置，以便它知道如何处理周围的元素。

我会尝试：

.menu{
    position:relative;
    z-index:3;
}

这可能会奏效，但如果没有看到HTML，则有点难以帮助。

Answer 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：菜单在内容之上向下滑动，而不是向内推送内容

2 个答案: