0

我有一个侧栏，当您将鼠标悬停时它会滑过内容，当您将鼠标移出时它会滑回。一切都很好。

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

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

小提琴

谢谢

$('.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);
});
4

4 回答 4

2

您可以取消绑定 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();
于 2013-10-28T15:36:40.550 回答
1

我已将 mouseout 函数包装在 IF 语句中，以检查侧边栏是否具有sidebar-locked该类。如果这样做，则不会执行以下动画。

if(!$('.sec-sidebar').hasClass('sidebar-locked')){
  $(this).find('.sec-nav').stop().animate({marginLeft: '-215px'}, 300);
}

这是您希望达到的目标吗？

这是JsFiddle。

注意：!IF 语句开头的表示 IF NOT。所以，如果不是上面例子中的这个类。

于 2013-10-28T15:30:44.723 回答
1

我脑子里有两个简单的解决方案。

1：如果鼠标事件中的 .hasClass() 存在“sidebar-locked”，您可以检查侧边栏的类。

2：您可以完全删除鼠标事件，锁定时解除绑定，解锁时重新绑定。请参阅jQuery API：取消绑定。

旁注：考虑使用悬停事件而不是两个单独的鼠标事件。

于 2013-10-28T15:35:23.247 回答
0

您应该清除 mouseover 事件处理程序，并在需要时重新分配它。 删除事件处理程序。

于 2013-10-28T15:42:13.013 回答