3

これは簡単な修正であると思いますが、間違った方法で行っている可能性があります。

ボタンをクリックすると上下にスライドするアコーディオンメニューがあります。アコーディオンをアクティブにするボタンには、静的、ホバー、およびクリックの状態があり、テキストの色を変更するだけです。

ページを下にスクロールした後にアコーディオン メニューを閉じない限り、すべて正常に動作します。ブラウザー ウィンドウはアコーディオンを折りたたんで上に移動しますが、ホバー オフ機能がアクティブになることはないため、ボタンはクリックされた状態のままです。ボタンの上にカーソルを合わせると、すべてが元の状態に戻ります。

クリック状態でホバーオフ状態をオーバーライドして、静的な色に戻す方法はありますか?

いくつかのコードを用意してください。私が言っていることを説明するのに役立つかもしれません。

ここでフィドルを作りました

問題はすべて自己完結型のフィドル ボックスにあるため、実際の問題を実際に見ることはできません。

これについてさらに説明できるかどうか教えてください。

4

3 に答える 3

2

アニメーションの終了後に実行する関数に、ドロップダウンの色を変更するコードを配置する必要があります。

それ以外の：

 submenu.stop().slideDown('fast');
 $(this).css('color','#000');

使用する：

submenu.stop().slideDown('fast', function() { 
    dropdown.css('color','#000');  //this part gets executed after the animation
});

更新されたフィドルは次のとおりです：http：//jsfiddle.net/fpFCj/2/

于 2012-08-13T20:50:15.670 に答える
2

Sam Dufel が言ったように、 を使用:hoverするとより良い結果が得られます。css プロパティを直接設定する代わりにクラスを使用することもできます。これにより、特定の瞬間にどのスタイルを表示するかをブラウザーが判断するという困難な作業が行われます。

.dropdown.expanded {
    color:#000;
}

.dropdown.collapsed {
    color:#BDBDBD;
}

.dropdown:hover {
    color:#6e6e6e;
}

...

// Remove the whole $.hover

if (submenu.is(":hidden")) {
    submenu.stop().slideDown('fast');
    $(this).removeClass("collapsed").addClass("expanded");
}
else {
    submenu.stop().slideUp('fast');
    $(this).removeClass("expanded").addClass("collapsed");
}

jsFiddleでのデモ。

于 2012-08-13T20:50:50.913 に答える
1 
$('.dropdown').on({
    click: function() {
        $(this).css('color', $(this).siblings('.sublinks').is(":hidden") ? '#000' : '#BDBDBD')
               .siblings('.sublinks').stop().slideToggle('fast');
    },
    mouseenter: function() {
        if (!$(this).next().is(":visible")) $(this).css('color','#6e6e6e');
    },
    mouseleave: function() {
        if (!$(this).next().is(":visible")) $(this).css('color','#BDBDBD');
    }
});

フィドル

于 2012-08-13T21:03:43.317 に答える