jQuery 工具选项卡 - 鼠标悬停时可折叠的选项卡内容

Question

我目前正在使用 jQuery 工具选项卡插件。我现在工作得很好，但我需要一些不包括在内的附加功能。

我正在寻找的功能是当一个选项卡被激活并且用户将他们的鼠标移到选项卡内容区域之外时，该选项卡被折叠。 （几乎就像一个带有 css 的下拉菜单）

到目前为止，我有以下代码：

$('#main-content > div').mouseleave(function() { 
    var api = $('.nav').data('tabs'); 
    if (api.getIndex() == $('.nav a').parent('li').index()) { 
        api.getCurrentPane().hide().removeClass('current'); 
    } 
});

$(".nav").tabs("#main-content > div", {
    initialIndex: 5, 
    event: 'mouseover',
});

代码似乎只在最后一个选项卡上有效，我不知道为什么。

演示： http://www.edisonfordinsure.co.uk/other/portal/idea/

任何帮助将不胜感激。

Answer 1

试试这个

var api = $('.nav').data('tabs'); 
$('#main-content > div').mouseleave(function() { 
    $(api.getTabs()[api.getIndex()]).removeClass('current'); 
    $(api.getPanes()[api.getIndex()]).hide(); 
});

发生了什么：

$('.nav a').parent('li').index()

总是返回相同的值 (3)

你正在删除 div 上的类，而不是选项卡上的类。