问题标签 [jquery-ui-menu]

我的一个页面中有一个 jquery ui“选项卡”小部件，效果很好。选项卡水平显示，如“详细信息”“地址”，单击每个选项卡时，不同的内容显示如下

jQuery 选项卡

但现在我正在努力将这些选项卡更改为菜单。实际上，主菜单只有一个选项，例如：“员工”，当用户悬停员工时，一些新的子菜单将垂直打开，如“详细信息”、“地址”等，就像这里一样，很好而且平易近人：

jQuery 菜单

有了这个，我必须在不同的“子菜单”点击上显示不同的内容，因为标签在每次不同的点击上显示不同的内容。例如：如果单击“详细信息”子菜单，则与详细信息相关的 div 内容应显示，并且与其他子菜单相同。我一直在尝试，但无法在子菜单中添加内容。如何做到这一点？

我使用了 RRR 给出的相同的以下代码，但没有成功：

我有一个包含很多子级别的下拉菜单。我做了一个简单的 4 个级别的例子。因为菜单在侧边栏中应该也方便较小的移动设备，我想限制总宽度。

是否有可能让非活动级别的宽度自动缩小，使整个菜单的总宽度不超过220px？所以当我用鼠标移动到第 3 层时，第 1 层和第 2 层的宽度会自动变窄。

我的代码是（在头部带有 jquery-links）：

当我在菜单项上放置一个图标时，它会使 li 变高，但是如果您检查元素，则 li 是元素中唯一变高的东西。

这是可以避免的吗？如果不是，为什么？
示例链接：https ://jsbin.com/kirekufoju/edit?html,output

我为我的问题准备了一个jsFiddle：

为此，我采用了带有类别示例的 jQuery UI 菜单，并且刚刚VALUE="some_number"为每个元素添加了属性<LI>：

然后我尝试在单击按钮时在警报中检索并显示该值：

但这里.val()似乎是一个糟糕的选择，我可能需要为此经历$("#menu")？

我还想知道，为什么在 jQuery 示例中悬停和项目选择时突出显示列表项 - 而不是在我的 jsFiddle 中？

更新：

clearshot66 建议的 HTML-select/optgroup/option 解决方法很好，但我想让我的 jQuery UI 菜单工作......我还在jQuery 论坛上发布了我的问题。

我决定使用 slicknav 为火灾报警事件系统的一系列记录构建一个动态导航系统。我在 Lotus domino 数据库中构建了这个系统，在这个数据库中，我有一个按年、月和日可扩展部分的动态系统。这是假设在我的应用程序中复制该导航。在查看了不同的插件后，我决定使用 slicknav。这就是我的挑战所在。我必须从文件记录中构建这个系统。这是我系统的基础。首先是我返回的 json 数据示例：

这是我为静态测试而构建的 html 和 jquery 代码：

这一切都没有问题。这是我为动态构建它而构建的代码。我正在使用 id 将数据附加到菜单的正确级别。通过代码的第一次迭代工作正常，但是我找不到将代码附加到以下迭代的 id。这是那个代码。我只展示了构建无序列表的逻辑。

我正在处理 jqueryUI 菜单小部件并出现错误行为。

查看以下代码片段和下面的菜单方案： 正如您所见，菜单已打开到第三级。我的意图是只需单击鼠标即可关闭整个第二个菜单项。所以我想点击“项目2”，所有对应的子项目都应该折叠（2.x，2.xx）。不幸的是，我目前必须在主菜单项上单击两次才能实现此目的。

项目 1

-- 项目 1.1

第 2 项

-- 项目 2.1

-- 项目 2.2

--- 项目 2.2.1

--- 项目 2.2.2

--- 项目 2.2.3

-- 项目 2.3

负责的功能结构如下：

,

任何想法？

我正在开发一个需要完全由键盘控制的应用程序，到目前为止一切都很好，但是当使用 ENTER 键时，我无法使 JQuery UI 菜单小部件工作。

从文档来看，似乎没有具体的方法可以使这项工作，所以我在列表元素上使用“onclick”

这是一个 jsfiddle ( https://jsfiddle.net/djbh6r82/ )，其中包含 JQuery UI 文档中的示例和第一个菜单项上的警报 -> 当我单击它时它工作正常，但使用“ENTER”它只会带给我回到开始（专注于菜单不会丢失）

我做错了吗？我尝试了不同的东西（<a href='#' onclick="xxx"></a>而不是div，onclick div而不是ul）但似乎没有任何效果