0

現在、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/

どんな助けでも大歓迎です。

4

1 に答える 1

0

これを試して

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でクラスを削除しています。

于 2013-06-05T14:39:05.797 に答える