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

しかし、最初のクリックで失敗し、firebug ログ:

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 に答える