1

我正在使用Chris Coyier 的“长下拉”插件来解决我的（长）下拉问题。顺便说一句，我正在使用top: 100%而不是top: 0因为我的下拉菜单位于主菜单上方。

问题

长下拉示例

普通菜单

预期的

jQuery部分：

$(function () {
            var maxHeight = $(window).height() - ($("ul.dropdown").offset().top + $("ul.dropdown").outerHeight());

            $("ul.dropdown > li").hover(function () {
                var $container = $(this),
                 $list = $container.find("ul"),
                 $anchor = $container.find("a"),
                 height = $list.height() * 1.1,       // make sure there is enough room at the bottom
                 multiplier = height / maxHeight;     // needs to move faster if list is taller

                // need to save height here so it can revert on mouseout            
                $container.data("origHeight", $container.height());

                // so it can retain it's rollover color all the while the dropdown is open
                $anchor.addClass("hover");

                // make sure dropdown appears directly below parent list item    
                $list
                    .show();

                // don't do any animation if list shorter than max
                if (multiplier > 1) {
                    $container
                        .css({
                            overflow: "hidden"
                        })
                        .mousemove(function (e) {
                            var offset = $container.offset();
                            var relativeY = ((e.pageY - offset.top) * multiplier) - ($container.data("origHeight") * multiplier);
                            if (relativeY > $container.data("origHeight")) {
                                $list.css("top", -relativeY + $container.data("origHeight"));
                            };
                        });
                }
            }, function () {

                var $el = $(this);

                // put things back to normal
                $el
                    .height($(this).data("origHeight"))
                    .find("ul")
                    .css({ top: "100%" })
                    .hide()
                    .end()
                    .find("a")
                    .removeClass("hover");
            });
        });

更新

JS小提琴

在 JS Fiddle 上，尝试更改top:100%oful.dropdown ul规则top: 0——这是我的问题。

更新 v2

删除了无用的内容。

更新 v3

谢谢大家的帮助——现在我可以更好地组织我的问题了。

看看这个小提琴——这是我的问题。

这就是我所期待的。

4

1 回答 1

2

完全删除top规则将强制绝对定位的子菜单从主菜单元素结束的高度开始（这是所需的行为）。这看起来与 相同top: 100%;，但据我了解，您想摆脱该规则。

在这里看到它：http: //jsfiddle.net/wB7fn/4/

编辑

这是我能得到的最接近的结果：http: //jsfiddle.net/wB7fn/9/。

必须通过手动扩展来解决主元素宽度的问题，以便所有子菜单元素都适合。就像我在评论中描述的那样 - 父元素需要拥有position: relative和适当z-index的 . 最后的改变是制作a主菜单的元素，所以它填充了父元素display: block的整个宽度。li

编辑2

在这里也修复了 JStop问题：http: //jsfiddle.net/wB7fn/10/

于 2013-06-04T16:10:51.727 回答