Question

我有以下标记：

<ul>
    <li><a href="#">first</a></li>
    <li><a href="#">largerWord</a></li>
    <li class="active"><a href="#">third</a></li>
</ul>

项目具有透明背景，但活动类除外，它具有蓝色。

这个想法是，当用户点击（不是活动的）而不是切换我要移动背景的背景时，你可以看到结果几乎在这里完成，但是第一次点击失败（请参阅错误日志的问题结尾））：

http://jsfiddle.net/FeV55/26/

我所做的是动态创建一个较低的z-index <li>并根据（点击的）项目偏移设置左边的动画，并根据（点击的）项目宽度设置宽度

jquery代码：

$(document).ready(function(){

    $('ul li a').not('.active').click(function(){
        /*caching*/       
        var activa = $('li.active');
        var bg = $('li.back');;
        var list = $(this).closest('ul');
        /*when it's first click the background item doesnt exist*/
        if(bg.length>0 == false){
            list.append('<li class="back"></li>');
        }
        var width = $(this).outerWidth(true);
        var leftUL = list.offset().left;
        var leftThis = $(this).offset().left;
        var left  = leftThis - leftUL;
        /*Remove class to previous active*/
        activa.removeClass('active');
        /*Cancel background even if parent is active*/
        $(this).addClass('noBg');
        /*Update active class*/
        $(this).parent().addClass('active');
        /*Move the background to its offset*/
        bg.animate({'left':left,'width':width});

        /*logs*/
        $('#oUl').text(leftUL);
        $('#ocl').text($(this).offset().left);
        $('#odf').text(left);
        $('#obg').text(bg.offset().left);
    });
});

但是第一次点击，firebug日志失败了：

bg.offset() is null
[Parar en este error]   

$('#obg').text(bg.offset().left);

问题是为什么？在任何情况下，该项目应该存在..

Answer 1

请务必在创建后选择已分配给bg的元素：

 var bg = $('li.back');

 if (bg.length == 0) {
   list.append('<li class="back"></li>');
   bg = $('li.back');
 }

更好的是，将元素创建为 bg：

 if (bg.length == 0) {
   bg = $('<li class="back"></li>');
   list.append(bg);
 }

在导航中设置活动项目背景的动画失败

1 个答案: