菜单项处于活动状态时的 JQuery CSS 菜单问题答案

【问题标题】：JQuery CSS menu issue when menu item is active菜单项处于活动状态时的 JQuery CSS 菜单问题
【发布时间】：2009-12-09 20:20:37
【问题描述】：

我正在为我的网站使用基于 JQuery 的 CSS 菜单。但是，我的问题是，如果我单击菜单项中的一项。我希望它保持某种颜色，在我的情况下是图像的一半。

我的代码来自http://snook.ca/archives/javascript/jquery-bg-image-animations/ 我使用了第二个示例。下面是示例页面：http://snook.ca/technical/jquery-bg/

我的代码如下所示

<script type="text/javascript">
        $(function(){

        $('#nav a')
            .css( {backgroundPosition: "-20px 35px"} )
            .mouseover(function(){
                $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:800})
        })
            .mouseout(function(){
                $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:800, complete:function(){
                    $(this).css({backgroundPosition: "-20px 35px"})
                }})


        })
        });
    </script>

如果您将鼠标悬停在菜单上，菜单将变为不同的颜色，这就是我希望菜单在菜单处于活动状态并被点击时保持的颜色。

希望有人可以帮助我。

我按照答案尝试了，还是没有

我修改后的代码

<script type="text/javascript">
    $(function(){

    $('#nav a')
        .css( {backgroundPosition: "-20px 35px"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:800})
    })
        .mouseout(function(){
            $(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:800, complete:function(){
                $(this).css({backgroundPosition: "-20px 35px"})
            }})


    })

    $('#nav a').click(function() {
         $('#nav a:not(.selected');
        $('#nav a').removeClass('selected');
        $(this).addClass('selected');
    })


    });



</script>

【问题讨论】：

标签： jquery css

【解决方案1】：

您应该为点击的链接添加一个 CSS 类，与此类似：

$('#nav a').click(function() {
    $('#nav a').removeClass('selected');
    $(this).addClass('selected');
})

然后，你可以有这样的 CSS 声明：

.selected { background-position: -20px 35px; }

最后，mouseOver 和 mouseOut 函数应该设置为$('#nav a:not(.selected')，如果您不希望 CSS 被覆盖。

[编辑] 这是完整的代码：

$(function(){

    $('#nav a:not(.selected)')
        .css( {backgroundPosition: "-20px 35px"} )
        .live('mouseover', function(){
            $(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:800})
        })
        .live('mouseout', function(){
            $(this).stop()
                .animate({
                    backgroundPosition:"(40px 35px)"},
                    {duration:800, complete:function(){
                        $(this).css({backgroundPosition: "-20px 35px"});
                }})
    })

    $('#nav a')
         .live('click', function() {
             $('#nav a').removeClass('selected');
             $(this).addClass('selected');
         });
});

【讨论】：

@Alex，请为 mouseover 和 mouseout 更改为 live() 事件，我会给你一个 +1
我试过了，但不知何故似乎不起作用我在答案的底部添加了我的代码
@cballou：完成！ @Roland：请尝试我发布的完整代码示例
我认为它永远不会到达点击事件，我尝试添加这样的警报 $('#nav a') .live('click', function() { alert('sa' ); $('#nav a').removeClass('selected'); $(this).addClass('selected'); });并且永远不会触发警报
您可以尝试将其设为非实时事件并取消它，也许导航是问题所在。 $('#nav a').click(function(e) { e.preventDefault(); $('#nav a').removeClass('selected'); $(this).addClass('selected'); });

【解决方案2】：

使用 Alexander 的代码在选择项目时添加选定的类，您应该能够像这样修改鼠标移出侦听器：

.mouseout(function(){
    // cache $(this) rather than executing it multiple times
    var $this = $(this);
    if (!$this.is('.selected')) {
        $this.stop().animate(
            {
                backgroundPosition:"(40px 35px)"
            }, 
            {
                duration:800, 
                complete:function()
                {
                    $this.css({backgroundPosition: "-20px 35px"})
                }
            }
    )
})

希望对你有帮助！

【讨论】：