在JQuery ui菜单中滚动子菜单 [英] Scrolling submenus in JQuery ui menu

问题描述

以下问题说明了如何在JQuery-ui菜单中使用垂直滚动条: JQuery UI菜单滚动

The following question tells how use a vertical scroll bar in the JQuery-ui menu: JQuery UI Menu Scroll

那很好，但是看来对于子菜单来说这样做并不好.子菜单有时会在其父级的底部创建一个水平滚动条，而不是向右扩展.最终，我希望主菜单和子菜单都能垂直滚动，并且没有任何水平滚动条.

That's good but it appears that doing this doesn't work so well for submenus. The submenus will sometimes create a horrizontal scroll bar at the bottom of their parent instead of extending to the right. Ultimately, I would like both the main menu and my sub menus to scroll verically and not have any horrizontal scrollbars.

您将在此小提琴中看到: http://jsfiddle.net/kPVKL/菜单"两个"将正常打开，但菜单三个"仅显示水平滚动条.

As you can see in this fiddle: http://jsfiddle.net/kPVKL/ Menu "two" will open up fine but menu "three" just displays a horrizontal scroll bar.

我怀疑我的问题在这里

     .ui-menu {
               width: 150px;
               height: 200px;
               overflow-y: scroll;
      }

1. 我哪里出错了?
2. 有没有更好的方法?我唯一的限制是我必须使用jquery-ui菜单，否则其他任何事情都会发生.

谢谢.

推荐答案

这个小提琴-来自我，以同样的问题进行黑客攻击(其他人，为多余的stuf感到抱歉)-

This fiddle -- from me hacking with the same issue (and others, sorry for the extraneous stuf ) -- http://jsfiddle.net/marvmartian/VT37s/ -- works in Chrome and FF. The key appears to be "position: fixed !important;" on the ui-menu CSS:

.ui-menu {
    width: 150px;
    height: 70px;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 100 !important;
    position: fixed !important;
}

我不知道为什么会这样.检查什么jQuery ui正在构建DOM方式看起来不错–所有子菜单都处于位置:绝对，我看不出它们为什么要相互嵌入的任何原因；但正如您所指出的那样，第三级子菜单以某种方式将其自身嵌入第二级子菜单中.

I have no clue why this works. An inspection of what jquery ui is building DOM-wise looks OK -- all the submenus are position: absolute and I can't see any reason why they should be embedded in each other; but as you point out, the third level submenu embeds itself in the second level submenu somehow.

这篇关于在JQuery ui菜单中滚动子菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！