1

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

3 に答える 3

1

私は多かれ少なかれ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/

于 2013-03-30T19:11:17.187 に答える
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 のコードを使用しました。ID を自分の ID に合わせて変更する必要があります。

于 2013-03-30T18:42:58.637 に答える