Javascript 我需要更新我的jQuery代码

我从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")
        });
    });
});

$（窗口）.bind（“加载”，函数（）{
var$el，leftPos，newWidth；
$mainNav2=$（“#示例二”）；
/*
例一
*/
/*通过JavaScript添加魔线标记，因为如果没有*/
$（“#行菜单”）。追加（
）；
/*缓存它*/
变量$magicLine=$（“#幻线”）；
$magicLine.width（$（“.current\u page\u item”）.width（）
.css（“左”，$（.active a”）.position（）.left）
.data（“origLeft”，$magicLine.position（）.左）
.data（“origWidth”，$magicLine.width（））；
$（“#行菜单li”）.find（“a”）.hover（函数（）{
$el=$（此项）；
leftPos=$el.position（）.left；
newWidth=$el.parent（）.width（）；
$magicLine.stop（）.animate({
左：左位置，
宽度：新宽度
});
}，函数（）{
$magicLine.stop（）.animate({
左：$magicLine.data（“origLeft”），
宽度：$magicLine.data（“origWidth”）
});
});
});

该行返回到原始位置，因为

悬停

附加了回调。在这种情况下，您需要做的是，当单击菜单项时，您需要避免该行进入原始位置

这是我要做的-

附加单击处理程序，当用户单击菜单项时，设置一个标志以显示菜单已选中。在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
    });                             
});

---

首先，我认为

解除绑定hover

会阻止调用回调，但这并没有奏效。所以用旗子试过了。请阅读代码注释，我没有回答所有问题。

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

$（文档）.ready（函数（）{
magicline（）；
});
函数magicline（）{
var$el、leftPos、newWidth、，
$mainNav=$（“#示例一”）；
//在创建新的魔线之前删除旧的魔线。
$（“#幻线”）.remove（）；
$mainNav.append（“
”；
变量$magicLine=$（“#幻线”）；
$magicLine
.width（$（“.current\u page\u item”）.width（）
.css（“左”（“.current_page_item a”）.position（）.left）
.data（“origLeft”，$magicLine.position（）.左）
.data（“origWidth”，$magicLine.width（））；
$（“#示例一li a”）.hover（函数（）{
$el=$（此项）；
leftPos=$el.position（）.left；
newWidth=$el.parent（）.width（）；
$magicLine.stop（）.animate({
左：左位置，
宽度：新宽度
});
}，函数（）{
$magicLine.stop（）.animate({
左：$magicLine.data（“origLeft”），
宽度：$magicLine.data（“origWidth”）
});    
});
}
//单击一个新的菜单项，遍历并删除该类
//然后将该类添加回单击的类的父类，并调用
//magicline函数
$（'li a'）。在（'click'，function（）上{
$（'li'）。每个（函数（）{
$（this.removeClass（'current_page_item'）；
});
$（this.parent（）.addClass（'current_page_item'）；
magicline（）；
});

演示：

---

另外，我使用了CSSTRICKS的代码，您必须更改id以匹配您的id。

我或多或少地猜测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()
            });
        }
    });
});

$（窗口）.bind（“加载”，函数（）{
var$lineMenu=$（“#line menu”），
$active=$lineMenu.children（“.current\u page\u item”），
$magicLine=$（“
”）；
$magicLine
.width（$active.width（））
.css（“左，$active.position（）.left”）
.appendTo（$lineMenu）；
$lineMenu.on（'mouseenter mouseleave click'，'li:not（#line menu'），函数（e）{
var$el=e.type=='mouseleave'？$active:$（此项）；
如果（e.type=='click'）{
$el.addClass（'active'）.sides（）.removeClass（'active'）；
$active=$el；
}否则{
$magicLine.stop（）.animate({
左：$el.position（）.left，
宽度：$el.width（）
});
}
});
});

---

在jsfiddle.net中创建一个实时演示，如果看不到实时html和CSS的定位问题，很难提供帮助

$（“#line menu li”）中的部分。查找（“a”）。悬停（function（）{/code>是设置魔线位置的部分（它下面的第二个函数将魔线重新调整回原点）。类本身只是它的一部分，让它设置在活动菜单项下不仅仅是将该类添加到元素中。多谢了，这一个很有效！！！它在JSFIDLE上很有效，但我是一个面条，我无法与我的站点很好地集成，我不知道为什么。总之，其他人给了我一个更简单的答案，非常感谢你们两位。