javascript - jQuery - 悬停显示侧边栏，但可以选择锁定它

Question

我有一个边栏，当您将鼠标悬停在上面时它会滑过内容，当您将鼠标移开时它会滑回。一切正常。

然后我有一个按钮，当您单击它时，它会将侧边栏锁定到位，将后面的内容推过去。将侧边栏锁定到位。也很好用..

我的问题是，我希望当侧边栏被锁定时，禁用悬停，并将其保持在展开状态，然后当你解锁它时，返回并重新启用悬停。

Fiddle

谢谢

$('.sec-sidebar-toggle').click(function (e) {
    e.preventDefault();
    if ($(this).closest('.sec-sidebar').hasClass('sidebar-locked')) {
        //unlocked
        $(this).closest('.sec-sidebar').removeClass('sidebar-locked');
        $(this).closest('.sec-sidebar').stop().animate({
            width: '38px'
        }, 300).css({
            'overflow': 'visible'
        });
    } else {
        //locked
        $(this).closest('.sec-sidebar').addClass('sidebar-locked');
        $(this).closest('.sec-sidebar').stop().animate({
            width: '253px'
        }, 300).css({
            'overflow': 'visible'
        });
    }
});

//Hover
$('.sec-sidebar').mouseover(function () {
    $(this).find('.sec-nav').stop().animate({
        marginLeft: '0px'
    }, 300);
}).mouseout(function () {
    $(this).find('.sec-nav').stop().animate({
        marginLeft: '-215px'
    }, 300);
});

Answer 1

您可以取消绑定(bind) mouseover 和 mouseout 事件。

http://jsfiddle.net/3n1gm4/VEUe9/

$('.sec-sidebar-toggle').click(function(e){
  e.preventDefault();
  if( $(this).closest('.sec-sidebar').hasClass('sidebar-locked') ){
    //unlocked
    $(this).closest('.sec-sidebar').removeClass('sidebar-locked');
    $(this).closest('.sec-sidebar').stop().animate({width: '38px'}, 300).css({'overflow': 'visible'});

    // ADD EVENT HANDLERS
    setupHover();
  } else{
    //locked
    $(this).closest('.sec-sidebar').addClass('sidebar-locked');
    $(this).closest('.sec-sidebar').stop().animate({width: '253px'}, 300).css({'overflow': 'visible'});

    // REMOVE EVENT HANDLERS
    $('.sec-sidebar').unbind('mouseover');
    $('.sec-sidebar').unbind('mouseout');
  }
});

function setupHover() {

    //Hover
    $('.sec-sidebar').mouseover(function(){
      $(this).find('.sec-nav').stop().animate({marginLeft: '0px'}, 300);
    }).mouseout(function(){
      $(this).find('.sec-nav').stop().animate({marginLeft: '-215px'}, 300);
    });
}

setupHover();