1

我正在使用魔术线 jquery，它适用于主导航但只要我添加子导航，如果我悬停它会产生一些问题，并且线条会移回第一个菜单并且不会停留在其父级。

这是代码和codepen url，它会因为父菜单悬停而产生问题，因此当悬停在子菜单上时它会失去原始位置。

code here

<nav>
  <ul class="tabs">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#about">About</a>
        <ul class="submenu">
       <li class="active"><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
      </ul>

    </li>
    <li><a href="#contact">Contact</a>
      <ul class="submenu">
       <li class="active"><a href="#home">Home</a></li>
          <li><a href="#about">About</a></li>
      </ul>

    </li>

    <li><a href="#">Really long string sample</a></li>
  </ul>
</nav>



body{font-family:Arial,Verdana,Helvetica,sans-serif;font-size:1em;overflow:hidden;min-height:325px}
nav{width: 800px;margin: 0 auto;}

/*Menu*/
ul.tabs{float:left;clear:both;width:800px;list-style:none;border-bottom:2px solid #00aeef;position:relative;font-size:1.061em;padding:0}
ul.tabs li{float:left}
ul.tabs li a{display:block;text-align:center;text-decoration:none;color:#666;padding:12px 20px;min-width:85px;font-weight:normal;transition: color 0.3s;}
ul.tabs li.active a{color:#00aeef}

#magic-line {position:absolute;bottom:-2px;left:0;width:125px;height:4px;background:#00aeef;transition: all 0.3s;}
/*Clear Fix*/
.tabs:after {visibility:hidden;display:block;content:"";clear:both;height:0}
*:first-child+html .tabs{zoom:1}

ul.submenu {
    position: absolute;
    width: 200px;
    display: none;
}
li:hover ul.submenu { display:block;}
li { list-style:none;}


$(function() {
  'use strict';
  /*Activate default tab contents*/
  var leftPos, newWidth, $magicLine;

  $('.tabs').append("<li id='magic-line'></li>");
  $magicLine = $('#magic-line');
  $magicLine.width($('.active').width())
    .css('left', $('.active a').position().left)
    .data('origLeft', $magicLine.position().left)
    .data('origWidth', $magicLine.width());

  $('.tabs li a').click(function() {
    var $this = $(this);
    $this.parent().addClass('active').siblings().removeClass('active');
    $magicLine
      .data('origLeft', $this.position().left)
      .data('origWidth', $this.parent().width());
    return false;
  });

  /*Magicline hover animation*/
  $('.tabs li').find('a').hover(function() {
    var $thisBar = $(this);
    leftPos = $thisBar.position().left;
    newWidth = $thisBar.parent().width();
    $magicLine.css({
      "left": leftPos,
      "width": newWidth
    });
  }, function() {
    $magicLine.css({
      "left": $magicLine.data('origLeft'),
      "width": $magicLine.data('origWidth')
    });
  });
});

https://codepen.io/visha97243/pen/Xebpjx

4

0 回答 0