0

我有以下标记：

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

但它在第一次点击时失败，萤火虫日志：

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

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

问题是为什么？无论如何，该项目应该在那时存在..

4

1 回答 1

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);
 }
于 2012-05-10T05:43:17.710 回答