将Jquery垂直选项卡更改为菜单

Question

从http://mehdi.biz/blog/2010/02/05/vertical-tabs-for-jquery-lovers/

我知道这很容易，但是我找不到解决方法。.当用户将鼠标从该图标移出时，只想隐藏面板（内容）。（像菜单一样，不像选项卡那样，不需要活动的选项卡）

我如何添加该jQuery代码？

var $items3 = $('#vtab>ul>li');
$items3.mouseleave(function()
        {                           
        $('#vtab>div').hide();  
        }).mouseleave();

尝试该代码..它隐藏了选项卡，所以我无法访问面板的内容。

例如：右侧面板http://arkansas.gov/

Answer 1

您在附加鼠标后立即触发它。 为什么？ 而不是您在vertical-tabs上使用javascript display: none; 到CSS中的#vtab > div 。

    var $items = $('#vtab>ul>li');
    var $contents = $('#vtab>div');
    $items.on('mouseenter', function() {
        $items.removeClass('selected');
        $(this).addClass('selected');
        $contents.hide();
        var index = $items.index($(this));
        $contents.eq(index).show();
    });
    $('#vtab').on('mouseleave', function(){
        $items.removeClass('selected');
        $contents.hide();
    });

在这里尝试。 这只会显示选项卡内容，并在mouseenter上选择选项卡，然后隐藏内容并在mouseleave上取消选择该选项卡。