启用下拉选项卡的 jQuery UI 选项卡

Question

我目前正在使用jQuery UI进行页面导航，我正在尝试将下拉菜单集成到标签中，因为jQuery UI在有许多标签时看起来都不好。要了解我到目前为止所获得的信息，请查看此屏幕截图：http://i.imgur.com/T9lwLI8.png

顶部是常规的 jQuery-UI 选项卡，下部是新的菜单设计，鼠标悬停在“患者”上。新的菜单设计是纯 CSS - 简单的分层 ul 和 li 标签显示：none 或 block 取决于 :hover。

尝试替换默认的 jQuery-UI 选项卡是一场噩梦。样式和 jQuery 功能似乎混合在一起，因为删除默认 id 和类会破坏选项卡功能，但是如果我将默认 id 和类添加到我的新选项卡部分，它会向其中添加不需要的样式以及其他奇怪的错误。

我的猜测是 jQuery UI 选项卡只需要一个包含选项卡的 ul 列表，但是因为我的 CSS 实现对每个启用下拉的选项卡都使用了一个 ul 列表，所以它不喜欢它。我查看了 .js 和 .css 文件，但老实说，我不确定我在寻找什么，因为我绝不是这方面的专家。

我一直在谷歌搜索，但我能找到的唯一解决方案通常是实施轮播来隐藏/显示额外的标签，否则这些标签会被推到另一行。如何让 jQuery UI 选项卡与鼠标悬停时具有下拉菜单的选项卡一起使用？

Answer 1

我花了很多时间寻找和沮丧，但我终于设法找到了解决方案。这并不完全理想，但它确实有效。

我将 ul 标签直接隐藏在 jQuery UI 与 display:none 一起使用的 'tabs' div 下，然后在它下面展开我的导航菜单。

我编写了这个简单的函数来在页面之间导航（取自here）：

function changeTab(tabIndex) {
    $("#tabs").tabs( "option", "active", tabIndex );    
    }

tabIndex 是零索引的，所以如果你的选项卡是#page-2，那么 tabIndex 就是 1。给你的选项卡提供唯一的 id 属性，然后用一些 jQuery 来推出它：

$('#tabTwo').click(function() {
    changeTab(1);
    });

同样不是一个很好的解决方案，但重要的是它确实有效。

Answer 2

对于下拉菜单，您可以使用 css 和简单的 jquery (.show) 和 (.hide)。会有一些简单的计算和css定位。每个选项卡容器都应该有一个下拉菜单列表。一旦您悬停选项卡，您就可以显示容器..如果您的下拉列表下存在任何列表，您可以通过另一个列表显示，该列表将出现在下拉列表的右侧，该列表在下拉列表中选择。您可以参考此链接.. 这个想法让你的页面看起来不错。

http://foundation.zurb.com/page-templates4/grid.html