Question

您好我正在使用魔术线并让它工作，但魔术线的宽度取<li>元素的宽度，但我希望它取{{1}的宽度元素。任何人都可以帮我编辑jquery代码来执行此操作吗？

这是html：

<a>

的CSS：

<ul id="menu-main-menu">
    <li><a href="#">text</a></li>
    <li><a href="#">text text</a></li>
    <li><a href="#">text text text</a></li>
    <li><a href="#">text text text text</a></li>
</ul>

jquery（抱歉长度）

#menu-main-menu {
  display: flex;
}

#menu-main-menu li {
  flex: 1 1 100%;
  text-align: center;
  list-style-type: none;
  position: relative;
}

#menu-main-menu li a {
  padding: 0 10px;
}

#magic-line {
    position: absolute !important;
    top: 0px;
    left: 0;
    width: 100px;
    height: 2px;
    background: #000;
    padding-top: 0 !important;
    margin-right: 0 !important;
}

和jsfiddle

here

谢谢！

Answer 1

你应该改变这个

jQuery("#menu-main-menu li").hover(function() {
            $el = jQuery(this);
            leftPos = $el.position().left;
            newWidth = $el.width();
            $magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        }, function() {
            $magicLine.stop().animate({
                left: $magicLine.data("origLeft"),
                width: $magicLine.data("origWidth")
            });
        });

进入

jQuery("#menu-main-menu li").hover(function() {
            $el = jQuery(this);
            leftPos = $el.position().left + $el.children().position().left ;
            newWidth = $el.children().width();
            $magicLine.stop().animate({
                left: leftPos,
                width: newWidth
            });
        }, function() {
            $magicLine.stop().animate({
                left: $magicLine.data("origLeft"),
                width: $magicLine.data("origWidth")
            });
        });

Answer 2

I forked your fiddle

开始之前的注释：为简单起见，我删除了与小提琴中包含的实际标记无关的部分功能，但如果它与您的实际项目相关，您可能需要修改所拥有的内容

所以第一个问题是变量currentPageWidth和currentPageLeft未定义，因为HTML中没有符合其定义的元素。由于您需要链接的宽度而不是li，因此我为此创建了新变量：

var linkWidth = $($mainNav).find('li:first-child a').width();
var linkLeft = $($mainNav).find('li:first-child a').offset().left;

然后我们更新悬停功能以直接引用每个li中的链接而不是li：

jQuery($mainNav).find('li').hover(function() {
  leftPos = jQuery(this).find('a').offset().left;
  newWidth = jQuery(this).find('a').width();
  ...

最后，我将.position()的使用更改为.offset()，以便我们获得每个链接相对于文档的左侧距离。在进行上述更改后，左侧定位似乎与.position()的预期无关。

（另外我更改了悬停功能以使用您已创建的$mainNav变量。）

希望有所帮助。

＆＃13;

jQuery(function() {

        var $el, leftPos, newWidth,
            $mainNav = jQuery("#menu-main-menu");

        $mainNav.append("<li id='magic-line'></li>");
        var $magicLine = jQuery("#magic-line");
        
        var linkWidth = $($mainNav).find('li:first-child a').width();
        var linkLeft = $($mainNav).find('li:first-child a').offset().left;

        $magicLine
            .width(linkWidth)
            .css("left", linkLeft)
            .data("origLeft", $magicLine.offset().left)
            .data("origWidth", $magicLine.width());

          jQuery($mainNav).find('li').hover(function() {
              leftPos = jQuery(this).find('a').offset().left;
              newWidth = jQuery(this).find('a').width();
              $magicLine.stop().animate({
                  left: leftPos,
                  width: newWidth
              });
          }, function() {
              $magicLine.stop().animate({
                  left: $magicLine.data("origLeft"),
                  width: $magicLine.data("origWidth")
              });
          });

    }, 1500);

＆＃13;

#menu-main-menu {
  display: flex;
}

#menu-main-menu li {
  flex: 1 1 100%;
  text-align: center;
  list-style-type: none;
  position: relative;
}

#menu-main-menu li a {
  padding: 0 10px;
}

#magic-line {
    position: absolute !important;
    top: 0px;
    left: 0;
    width: 100px;
    height: 2px;
    background: #000;
    padding-top: 0 !important;
    margin-right: 0 !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-main-menu">
    <li><a href="#">text</a></li>
    <li><a href="#">text text</a></li>
    <li><a href="#">text text text</a></li>
    <li><a href="#">text text text text</a></li>
</ul>

＆＃13;

将魔术线宽度设置为锚点而不是列表项目

2 个答案: