jquery - jQuery Tools Tabs - Collapsible tab content on mouseout

Question

I'm currently using jQuery tools tabs plugin. I'm at a point where it works pretty well but I need some added functionality which isn't included.

The functionality i'm looking for is when a tab is activated and the user moves their mouse outside of the tabs content area, the tab is collapsed. (Almost like a dropdown menu with css)

I so far have the following code:

$('#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',
});

The code only seems to work on the last tab and i'm not sure why.

Demo: http://www.edisonfordinsure.co.uk/other/portal/idea/

Any help would be greatly appreciated.

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