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上的类，而不是选项卡。

jQuery工具选项卡 - mouseout上的可折叠选项卡内容

1 个答案: