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

发布于 2024-11-29 02:48:33 字数 500 浏览 9 评论 0原文

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

我做错了什么？

原文

Currently this top menu which is supposed to stretch all the way across 100%, when clicked and expanded, it seems to just be sliding down and pushing the rest of the page content down.

I would like the menu to come down but instead of pushing the whole page down, just sit on top of the page and expand down how ever far necessary.

$(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();
    });     
});

What am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓦然回首 2024-12-06 02:48:33

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

我会尝试：

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

这可能有用，但如果没有看到 HTML，就很难提供帮助。

You to add a z-index and position properties to menu css. Z-index lets the HTML know the layer position of the element. In order for z-index to work properly, you need to specify the element position, so it knows how to handle surrounding elements.

I would try:

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

That might work, but without seeing the HTML it is a little difficult to help.

回复收藏 0 原文

盗心人 2024-12-06 02:48:33

我查看了该网站，我认为这只是一个 CSS 问题。我创建了一个小提琴来满足您的要求。该面板具有绝对位置，因此将在其他元素上打开。我也稍微改变了你的JS。对此

$('#open-close-toggle').click(function(){
    $('#toggle-section').slideToggle(); 
    var buttonText = $(this).html();
    if(buttonText == "Open"){
        $(this).html("Close");
    }else{
        $(this).html("Open");
    }
});

这是小提琴示例

I looked at the site, and i'm thinking its just a css issue. I've created a fiddle that does what you're asking for. The panel has a position of absolute, therefore will be opened over the other element. I also changed your JS a bit. to this

$('#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

回复收藏 0 原文

~没有更多了~