1

誰かが助けてくれることを本当に願っています。mouseenterで不透明度（cssのデフォルトは0.7）でフェードインし、mouseleaveで再びフェードアウトするアンカーの順序付けられていないリストがあります。

クリックすると、不透明度を完全に保つクラスを追加したいと思います。そこまで行きましたが、一致した要素からクラスを削除することは現時点では機能しません。クラスを持っている他のアイテムも完全に不透明のままです。

Jクエリは次のとおりです。

    $(document).ready(function () {

        $("#nav a").mouseenter(function () {
            $(this).fadeTo("slow", 1);
            $("#nav a").click(function () {
                $(".activeList").removeClass("activeList"); //THIS PART ISN'T WORKING   
                $(this).addClass("activeList");
            });
        });

        $("#nav a").mouseleave(function () {
            if (!$(this).hasClass("activeList")) {
                $(this).fadeTo("fast", 0.7);
            }
        });
    });

mouseenter が原因で要素に引っかかっており、(これ)しか影響を与えられないためだと思います。.bind/.unbind を試してみたり、クラスの追加/削除を独自に試したり (うまくいきました)、その他いくつかのことを試したりしましたが、今のところうまくいきません! どんな提案でも大歓迎です。

4

4 に答える 4

2

これを試して：

    $(document).ready(function () {

        $("#nav a").mouseenter(function () {
            $(this).fadeTo("slow", 1);
        });

        $("#nav a").click(function () {
            $(".activeList").removeClass("activeList"); //THIS PART ISN'T WORKING   
            $(this).addClass("activeList");
        });

        $("#nav a").mouseleave(function () {
            if (!$(this).hasClass("activeList")) {
                $(this).fadeTo("fast", 0.7);
            }
        });
    });
于 2012-07-06T21:15:16.253 に答える
0

要素のスタイル属性に追加することで不透明度が追加されるため、クラスを削除しても効果がないことがわかりました。次のようにスタイルをクリアしてみてください。

    $("#nav a").click(function () {
        $(".activeList").attr("style", "");
        $(".activeList").removeClass("activeList");
        $(this).addClass("activeList");
    });
于 2013-01-25T12:51:05.733 に答える
0

おそらくページが更新されないため、ホバーするまで不透明度がオフにならないことに気付きました。自分のコードを編集して機能させましたが、あなたのソリューションがよりセマンティックであるため、私のソリューションをあなたのソリューションに組み込むことができると思います。これが私が得たものです：

    $(document).ready(function () {
    $("#nav a").mouseenter(function () {
    if (!$(this).hasClass("activeList")) // Added IF here, only had it on 
                                         // mouseleave originally
        {
        $(this).stop().fadeTo("slow", 1);
        }
          $("#nav a").click(function () {
          $(".activeList").stop().removeClass("activeList"); 
          $(this).stop().stop().addClass("activeList");
          $("#nav a").stop().not(".activeList").fadeTo("fast",0.7);
   //The class came off, but the opacity didn't fade because no page refresh..?
   //Added extra animation eliminating selected with .not to fix

        });
        });
            //THE REST IS SUPERFLUOUS
        $("#nav a").mouseleave(function () {
        if (!$(this).hasClass("activeList")) 
             {
           $(this).stop().fadeTo("fast", 0.7);
             }
    });
});

複数のホバーがうまくいかなかったため、いくつかの .stop パーツも追加する必要がありました。今すぐ投稿を停止します。おそらく、あなたの回答をより適切なコードに統合できたかどうかを言うために、あなたのコメントを 1 つだけポップしてください。

投稿してくださった皆様、本当にありがとうございました！

于 2012-07-07T18:43:27.397 に答える
0

次のことを試してください (ほとんど同じコードですが、いくつかの微調整を加えてレイアウトが異なります)。

$(document).ready(function () {

    $("#nav a").hover(function(e) { //On hover in
        $(this).fadeTo("slow",1);
    },function(e) { //On hover out
        if(!($(this).hasClass("activeList")))
        {
            $(this).fadeTo("fast",0.7);
        }
    }).click(function(e) { //On click
        $("#nav a").removeClass("activeList");
        $(this).addClass("activeList");
    });
});
于 2012-07-07T15:31:39.643 に答える