对话框内的jquery菜单不显示子菜单答案

【问题标题】：jquery menu inside dialog not showing sub menus对话框内的jquery菜单不显示子菜单
【发布时间】：2013-12-09 14:42:13
【问题描述】：

我有一个 jquery 菜单，带有子菜单，在这样的 jquery 对话框内。

http://jsfiddle.net/pnmpn25/VPXjs/17/

$("#menu").menu();

$("#dlg").dialog();

我的问题是，当我打开子菜单时，它会隐藏在 div 内并出现滚动条。我想要发生的是子菜单与对话框重叠。我试过设置 z-index，但无济于事（位置：绝对）

这个问题类似，但没有公认的答案。

Problem: Menu UL is always behind jquery dialog

有什么想法吗？

【问题讨论】：

标签： jquery css jquery-ui-dialog jquery-ui-menu

【解决方案1】：

您需要做的就是将overflow: visible 添加到.ui-dialog 类并从.ui-dialog .ui-dialog-content 中删除溢出。

.ui-dialog {
    overflow: visible
}

.ui-dialog .ui-dialog-content {
    overflow: inherit;
}

Updated example

【讨论】：

是的，这是一个更好的解决方案。其实这是解决方案！

【解决方案2】：

为所有子菜单添加一个类

然后，点击这些子菜单中的每一个，将对话框调整为所需的宽度

http://jsfiddle.net/VPXjs/19/

另外，这里是示例代码：

  <li class='submenu'><a href="#">Ada</a></li>
  <li class='submenu'><a href="#">Adamsville</a></li>
  <li class='submenu'><a href="#">Addyston</a></li>
  <li class='submenu'>

$('.submenu').click(function() {
    $('#dlg').dialog('option','width',460);
});

【讨论】：