1

我真的希望有人可以提供帮助。我有一个无序列的锚点列表，在 mouseenter 上淡入不透明度（css 默认为 0.7），然后在 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 而被困在元素中并且只能影响（this）。已经尝试过 .bind/.unbind，已经尝试过自己的 add/remove 类（它有效）和其他一些东西，但到目前为止还没有运气！任何建议将不胜感激。

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").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 回答
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 部分，因为多次悬停并不好。现在将停止发布，也许只是对你的评论发表一条评论，说我是否设法将我的答案整合到你更整洁的代码中。

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

于 2012-07-07T18:43:27.397 回答