Question

我需要为客户快速添加弹出菜单。我不想弄乱CSS或HTML，因为他们没有JS的风格，他们究竟是如何想要的，他们只是想让我添加JS。我只是认为将内部<ul>设置为绝对位置然后将顶部偏移设置为父<li>的顶部是很简单的，但它根本不起作用。甚至没有关闭。

$(function(){       
    $('#snav-links > li > ul').css({
        display:'none',
        position:'absolute',
        background:'#00182E',
        left:$('#snav-links').width()+'px'
    })
    .parent().hover(
        function(){
            $(this).find('ul').css({display:'block',top:$(this).offset().top+'px'})
        },
        function(){
            $(this).find('ul').css({display:'none'})
        }
    );
});

以下是页面：http://www.nwcidisplays.com/_temp/

将鼠标悬停在左侧边栏菜单项Banner Stands和Truss Displays上。你会看到它有多远。我不知道如何解决它。想法？

Answer 1

你麻烦的罪魁祸首是#snav-links > li内的锚点。它们是浮动的，不占用li元素的空间。这将导致li元素具有最小高度，并且它们位于实际链接之上。

删除浮动并将父级设置为相对定位，即：http://jsfiddle.net/rEVwd/6/。

您还必须调整li元素中的边距或填充，以便最终结果与以前相同。

Answer 2

如果您设置＃snav-links＆gt;的位置li元素为relative，则嵌套的绝对ul将相对于该容器。

你的ul的前（0，左0）将是LI的上角。

$('#snav-links > li').css({
            position:'relative',    // magic here
        }.find(' > ul').css({
            display:'none',
            position:'absolute',
        background:'#00182E',
        top:0,
            left:$('#snav-links').width()+'px'
        }).end()  // end() will take to back to the last selector (ie. $('#snav-links > li'))
        .hover(
            function(){
                $(this).find('ul').css({display:'block'})
            },
            function(){
                $(this).find('ul').css({display:'none'})
            }
        );

您可能需要根据菜单大小调整顶部和左侧（我不确定菜单的样子）

Answer 3

如果您使用FireBug进行检查，则父li位于按钮上方。 （正如Aleksi所说，由于它是浮动元素）（按钮显示为a.slink，它的父li位于其上方）所以当你正在检索时li的偏移量，你就到了那个位置。

因此，您可以尝试使用a.slink，因为它位于您想要的位置。

另外，要将左侧直接放在按钮旁边，您需要偏移+宽度#snav-links

$(function(){       
    $('#snav-links > li > ul').css({
        display:'none',
        position:'absolute',
        background:'#00182E',
        left:$('#snav-links').offset().left + $('#snav-links').outerWidth()+'px'
    })
    .parent().hover(
        function(){
            $(this).find('ul').css({display:'block',top:$(this).find('a').offset().top+'px'})
        },
        function(){
            $(this).find('ul').css({display:'none'})
        }
    );
});

为什么这个与jQuery没有对齐？

3 个答案: