javascript - 将 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

您在附加鼠标后立即触发了它。为什么？ 而不是垂直标签上的 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();
    });

尝试一下 here . 这将仅显示选项卡内容并在 mouseenter 上选择选项卡并隐藏内容并在 mouseleave 上取消选择选项卡。