我需要更新我的jQuery代碼

Question

我從CSSTRICKS中獲得了一段代碼，這是魔術線導航，它將在我的菜單項下放置一行，並將移過我懸停的那一行。我希望它是這樣的，當我點擊菜單時，該線將停留在該菜單項，並且不像往常一樣返回到第一個菜單項。

該腳本使用類選擇器來指示默認情況下該行的位置。因此，我用jQuery做了一個toggleClass，它將類傳遞給點擊的菜單項，但不更新。我必須重新加載頁面才能更新。而且，它又一次陷入了同一個位置。我希望有人知道如何做到這一點。這裏是我的代碼：

$(window).bind("load", function() { 
    var $el, leftPos, newWidth; 
    $mainNav2 = $("#example-two"); 

    /* 
    EXAMPLE ONE 
*/ 

    /* Add Magic Line markup via JavaScript, because it ain't gonna work without */ 
    $("#line-menu").append("<li id='magic-line'></li>"); 

    /* Cache it */ 
    var $magicLine = $("#magic-line"); 

    $magicLine.width($(".current_page_item").width()) 
     .css("left", $(".active a").position().left) 
     .data("origLeft", $magicLine.position().left) 
     .data("origWidth", $magicLine.width()); 

    $("#line-menu li").find("a").hover(function() { 
     $el = $(this); 
     leftPos = $el.position().left; 
     newWidth = $el.parent().width(); 

     $magicLine.stop().animate({ 
      left: leftPos, 
      width: newWidth 
     }); 
    }, function() { 
     $magicLine.stop().animate({ 
      left: $magicLine.data("origLeft"), 
      width: $magicLine.data("origWidth") 
     }); 
    }); 
}); 

Answer 1

將magicline移到它自己的函數中。下面評論編輯。

$(document).ready(function(){ 
     magicline(); 
    }); 

function magicline() { 

    var $el, leftPos, newWidth, 
     $mainNav = $("#example-one"); 
    //remove the old magic line before creating a new one. 
    $("#magic-line").remove(); 
    $mainNav.append("<li id='magic-line'></li>"); 
    var $magicLine = $("#magic-line"); 

    $magicLine 
     .width($(".current_page_item").width()) 
     .css("left", $(".current_page_item a").position().left) 
     .data("origLeft", $magicLine.position().left) 
     .data("origWidth", $magicLine.width()); 

    $("#example-one li a").hover(function() { 
     $el = $(this); 
     leftPos = $el.position().left; 
     newWidth = $el.parent().width(); 
     $magicLine.stop().animate({ 
      left: leftPos, 
      width: newWidth 
     }); 
    }, function() { 
     $magicLine.stop().animate({ 
      left: $magicLine.data("origLeft"), 
      width: $magicLine.data("origWidth") 
     });  
    }); 
} 
//on click on a new menu item iterate through and remove the class 
//then add the class back to the parent of the a clicked and recall the 
//magicline function 
$('li a').on('click',function(){ 
    $('li').each(function(){ 
     $(this).removeClass('current_page_item');    
    }); 
    $(this).parent().addClass('current_page_item'); 
    magicline(); 
}); 

演示：http://jsfiddle.net/calder12/vtuKH/1/

PS。我使用CSSTRICKS的代碼，您必須更改ID以匹配您的ID。

Answer 2

該行又回到原始位置，因爲有連接到hover回調。在這種情況下你需要做的是，當點擊菜單項時，你需要避免那條線進入原始位置。

這裏是我會怎麼做 -

連接單擊處理程序，當用戶點擊菜單項設置一個標誌，表明菜單中選擇。在懸停的回調函數中檢查該標誌，如果設置則返回。否則，如果不是平坦的設置，則將線條移動到前一個位置。

var $magicLine = $("#magic-line"); 
var isClicked = false; // to show whether menu is clicked or not 

$magicLine.width($(".current_page_item").width()) 
    .css("left", $(".active a").position().left) 
    .data("origLeft", $magicLine.position().left) 
    .data("origWidth", $magicLine.width()); 

$("#line-menu li").find("a").hover(function() { 
    $el = $(this); 
    leftPos = $el.position().left; 
    newWidth = $el.parent().width(); 

    $magicLine.stop().animate({ 
     left: leftPos, 
     width: newWidth 
    }); 
}, function() { 
    if(!isClicked){   // if no item is clicked, take line to old position 
     $magicLine.stop().animate({ 
      left: $magicLine.data("origLeft"), 
      width: $magicLine.data("origWidth") 
     }); 
    }else{     // else, just keep it there 
     isClicked = false; 
     return false; 
    } 
}).click(function(e){ // added click listener 
    isClicked = true;  // flag is set to indicate menu item is clicked. 
    $magicLine.css({ 
     left: leftPos, 
     width: newWidth 
    });        
}); 

首先，我想到了unbinding hover將防止回調被調用，但沒有解決。所以用旗子試了一下。請閱讀代碼評論，我沒有把所有的東西都回答。

Answer 3

我更多的還是在CSS和標記少的猜測，但這是更爲簡潔：

$(window).bind("load", function() { 
    var $lineMenu = $("#line-menu"), 
     $active = $lineMenu.children('.current_page_item'), 
     $magicLine = $("<li id='magic-line'></li>"); 

    $magicLine 
     .width($active.width()) 
     .css("left", $active.position().left) 
     .appendTo($lineMenu); 

    $lineMenu.on('mouseenter mouseleave click', 'li:not(#line-menu)', function (e) { 
     var $el = e.type == 'mouseleave' ? $active : $(this); 

     if (e.type == 'click') { 
      $el.addClass('active').siblings().removeClass('active'); 
      $active = $el; 
     } else { 
      $magicLine.stop().animate({ 
       left: $el.position().left, 
       width: $el.width() 
      }); 
     } 
    }); 
}); 

http://jsfiddle.net/userdude/tTsk6/