Question

我正在使用魔术线jquery，它可以在主导航中正常工作但是只要我添加子导航，如果我悬停它会产生一些问题并且线条会移回到第一个菜单并且不会保留到其父级。< / p>

这是代码和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

magicline子菜单悬停不起作用

0 个答案: