2

我正在尝试使用此下拉菜单：http ://ttb.li/dump/buttons/dropdown.html

在我的网站上，这看起来很好并且可以正常工作，但是打开的窗口放置在不正确的高度并且离右边很远（在我的网站上）。在jsfiddle 上它只是放置得太高了，但至少水平是正确的。

代码：http: //jsfiddle.net/EA6LS/1/

我从网站的演示中复制并粘贴了这个，我看不到我可能遗漏的任何内容......感谢您的想法。

更新

好吧，我只是想到了一些东西。在我的网站上，我将页面宽度定义为 900 像素。如果我在 firefox 上使用“inspect”，我可以看到 JS 为下拉菜单分配了 215px（给或取）左边距。这在我的屏幕上可能是准确的。但是，它将元素移动到我定义的 900px 区域的左侧，而不是在我的屏幕上.... 那么这可能是一个relative问题absolute吗？

4

2 回答 2

1

You can remove the JavaScript code that positions the dropdown and just define it in the CSS. If you position .dropdown relatively, .dropdown_content will be positioned relative to it's parent, which makes positioning easy:

.dropdown {
    ...
    position: relative;
}
.dropdown .dropdown_content {
    ...
    top: 100%;
    left: 0;
    margin: 5px 0;
}

Remove these lines of JavaScript:

var o = $(this).parent().find('.dropdown_button').offset();
var h = $(this).parent().find('.dropdown_button').height();
$(this).parent().find('.dropdown_content').css({'top':(o.top+h-1),'left':o.left});

(That is where your inline top and left values are coming from.)

Also, remove overflow: hidden from your body style definition.

Working demo: http://jsfiddle.net/gilly3/EA6LS/2/

I also usually think it's a good idea to uncheck "Normalized CSS" in jsfiddle. When debugging CSS, that can lead to confusing results.

While you're at it... that JavaScript can be simplified: http://jsfiddle.net/gilly3/EA6LS/4/

于 2012-08-01T19:59:08.227 回答
0

下拉菜单中的内容的顶部边距为 11 像素，但目前我无法确定它的定义位置。

在 css 中正确定义它似乎可以解决您的高度偏移问题。

.dropdown.open .dropdown_content {
    display: block;
    margin-top: 11px;    
}

编辑：似乎在 chrome 中用户代理的 ul、menu 和 dir 样式表有

-webkit-margin-before: 1em;

这是罪魁祸首（至少对我来说）

EDIT2：他们已经内联了css（通过jQuery以错误的方式），这也是你得到偏移错误的原因

<ul class="dropdown_content" style="top: 135px; left: 164px; ">

See this jsfiddle for the "correct" looking drop down. As per in the comment, here are the changes (note that in the javascript I deleted the part where it was setting the top of the drop down content):

CSS

.dropdown.open .dropdown_content {
    display: block;
    margin-top: 0px;    
}

javascript

$(this).parent().find('.dropdown_content').css({'left':o.left});
于 2012-08-01T19:39:55.587 回答