Question

我想制作一个从右边框屏幕向左滑动的滑块面板。当我＆＃34; hover＆＃34;我希望幻灯片开始移动面板调用者：选项卡。当面板移动时，它会随着推动标签。我有这段代码：

HTML

<div id="panel">
<div class="content"><!-- Content --></div>
</div>
<div id="tab">hit me for show panel</div>

CSS

#tab {
    width:50px;
    height:150px;
    position:fixed;
    right:0px;
    top:100px;
    display:block;
    cursor:pointer;
}
#panel {
        position:fixed;
    right:0px;
    top:50px;
    background-color:#999999;
    height:500px;
    width:0;
}
#panel .content {
    width:290px;
    margin-left:70px;
}

的jQuery

$(function() { 
        $('#tab').hover(function(event) {
        var panel = $('#panel');
        if (panel.hasClass('open')) {       //condition error
            panel.removeClass('open');
            $('.content').fadeOut('slow', function() {
                $('#panel').stop().animate({
                    width: '0',
                    opacity: 0.0
                }, 500)
            })
        } else {
            panel.addClass('open');
            $('#panel').stop().animate({
                width: '400',
                opacity: 1
            }, 500, function() { 
                $('.content').fadeIn('slow'); 
            });
        }
    }); 
});

问题是当我用鼠标光标离开标签时，＆＃34; hover＆＃34;面板，面板消失。而且我希望面板保持打开状态，只要我＆＃34; hover＆＃34;在两个：选项卡和面板上。我是怎么做到的？

Answer 1

请参阅下面的代码段

我已经改变了你的JQ了。首先，我已移除了if并在可见的mouseOut上添加了panel功能（使用课程open）

因此，当您将鼠标悬停在tab时，会显示panel，但hover out上没有任何结果。相反，如果您mouseout，则面板会再次隐藏。所以，只要您将光标放在panel上，它就会保持打开状态。

作为旁注，您可以使用addClass('open')和removeClass('open')删除部分，并使用mouseout()方法从#panel.open更改为仅#panel或使用变量panel。如果你不想在CSS中设置.open类或类似的东西，你可以这样做。

希望它有所帮助。让我知道:)）

＆＃13;

        $('#tab').hover(function(event) {
        var panel = $('#panel');
            panel.addClass('open');
          
            $('#tab').stop().animate({
                'right': '400',
           
               
            }, 500)
            $('#panel').stop().animate({
                width: '400',
                opacity: 1
               
            }, 500, function() { 
                $('.content').fadeIn('slow'); 
            });
   
         $('#panel.open').mouseout(function() { 
               $(this).removeClass('open');
               
            $('.content').fadeOut('slow', function() {
            $("#tab").removeClass("moveme")
                $('#panel').stop().animate({
                    width: '0',
                    opacity: 0.0
             }, 500)
                 $('#tab').stop().animate({
                'right': '0',
           
               
            }, 500)
      
     
     }); 
    }); 
           });

＆＃13;

#tab {
    width:50px;
    height:150px;
    position:fixed;
    right:0px;
    top:100px;
    display:block;
    cursor:pointer;

}
#panel {
        position:fixed;
    right:0px;
    top:50px;
    background-color:#999999;
    height:500px;
    width:0;

}
#panel .content {
    width:290px;
    margin-left:70px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="panel">
<div class="content"><!-- Content --></div>
</div>
<div id="tab">hit me for show panel</div>

＆＃13;

使用jQuery和css3

1 个答案: