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

1

sidebar-lockedサイドバーにクラスがあるかどうかを確認するために、IF ステートメントで mouseout 関数をラップしました。その場合、次のアニメーションは実行されません。

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 に答える
0

マウスオーバー イベント ハンドラをクリアし、必要に応じて再割り当てする必要があります。 イベント ハンドラを削除します。

于 2013-10-28T15:42:13.013 に答える