Question

我尝试在我的网站上使用MagicLine jQuery Navigation，但我遇到了一个小问题。我希望下划线恰好与它当前突出显示的单词一样长。相反，它只有几个像素，我根本无法处理。我尝试用CSS修复它，但我失败了。我相信这个问题的解决方案可以在jQuery代码中找到，但我不熟悉它，所以我请求你帮忙。 如何缩短jQuery中下划线的长度？

Here您可以找到MagicLine jQuery Navigation和here我的问题的图形说明。

Answer 1

我找到了解决方案.navigation ul li.active { margin-right: -10px; }

您需要将此CSS提供给它。

Answer 2

我做了一些调整以使其适合您的要求

$("#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());

演示：Fiddle

MagicLine jQuery - 下划线的长度

2 个答案: