1

WebサイトでMagicLinejQueryNavigationを使用しようとしましたが、小さな問題が発生しました。アンダースコアは、現在強調表示されている単語と正確に同じ長さにする必要があります。代わりに、それは数ピクセル長く、私は単にそれに対処することができません。CSSで修正しようとしましたが、失敗しました。この問題の解決策はjQueryコードにあると思いますが、私はそれに精通していないので、助けを求めています。jQueryでアンダースコアの長さを短くするにはどうすればよいですか？

ここにMagicLinejQueryナビゲーションがあり、ここに私の問題の図解があります。

4

2 に答える 2

0

私は解決策を見つけました.navigation ul li.active { margin-right: -10px; }

このCSSを与える必要があります。

于 2013-02-08T12:37:55.130 に答える
0

私はあなたの要件に合うようにいくつかの調整を行います

$("#example-one li").find("a").hover(function() {
    $el = $(this);
    var padding = ($el.outerWidth() - $el.width()) / 2;
    console.log($el.outerWidth(),$el.width(), padding)
    leftPos = $el.position().left + padding;
    newWidth = $el.width();

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

current_page_itemまた、変更する必要があります

var $currentItem =  $(".current_page_item a");
var padding = ($currentItem.outerWidth() - $currentItem.width()) / 2;

$magicLine
    .width($currentItem.width())
    .css("left", $currentItem.position().left + padding)
    .data("origLeft", $magicLine.position().left )
    .data("origWidth", $magicLine.width());

デモ：フィドル

于 2013-02-08T13:03:58.897 に答える