Question

我真的希望有人可以提供帮助。我有一个无序的锚点列表，它在不透明度上消失（css默认为0.7）在mouseenter上，而在mouseleave上再次出现。

点击后，我想添加一个让不透明度保持不变的类。到目前为止，但是从匹配的元素中删除类目前不起作用 - 其他具有该类的项目也保持完全不透明度。

这是Jquery：

    $(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，尝试过自己的添加/删除类（它有效）和其他一些东西，但到目前为止还没有运气！任何建议都将不胜感激。

Answer 1

试试这个：

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

Answer 2

尝试以下方法（它几乎是相同的代码，但布局不同，有一些调整）：

$(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");
    });
});

Answer 3

意识到不透明度直到悬停才会消失，可能是因为页面没有刷新，不知道。编辑了我自己的代码以使其工作，但我认为我可能会将我的解决方案用于您的解决方案，因为您的解决方案更具语义性。这就是我得到的：

    $(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部件，因为多个悬停不好。现在将停止发布，也许只是弹出一条评论就可以说我是否设法将我的答案整合到你的整洁代码中。

非常感谢你发帖，我真的很感激！

Answer 4

我发现通过添加元素的样式属性来添加不透明度，因此删除类没有帮助，请尝试清除样式，如下所示：

    $("#nav a").click(function () {
        $(".activeList").attr("style", "");
        $(".activeList").removeClass("activeList");
        $(this).addClass("activeList");
    });

Jquery Mouseenter单击以删除类不起作用

4 个答案: