Мне нужно обновить код jQuery

Question

У меня есть фрагмент кода из CSSTRICKS, волшебная линия навигации, которая поместит строку под мои пункты меню и будет перемещаться над теми, которые я наводил. Я хочу, чтобы это было так, когда я нажимаю меню, линия будет оставаться в этом пункте меню, а не возвращаться к первому, как обычно.

Сценарий использует селектор классов, чтобы указать, куда должна идти строка по умолчанию. С этим я сделал toggleClass с jQuery, который передает класс кликуемому пункту меню, но он не обновляется. Мне нужно перезагрузить страницу для обновления. И, опять же, он застрял в том же положении. Надеюсь, кто-то знает, как это сделать. Вот мой код:

$(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

Переместить волшебную линию в ее собственную функцию. Редактирование приведено ниже.

$(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, вам придется изменить идентификатор, чтобы он соответствовал вашим идентификаторам.

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/