导航莉左边距

Question

您好，我正在使用下面给出的代码将活动类添加到导航菜单。然后将span添加到活动类中，并设置左px，但我想有效地使用它。我该如何解决？

我在图片上展示了照片，以便我们更好地理解我的意思。

左跨显示不正确。我找不到解决方案。感谢您的帮助。

<div class="middle_right right header_side">
  <div class="header_side_container">
    <div class="header_builder_component header_builder_menu_component">
      <nav class="main-menu main_menu_container menu_line_enable">
        <ul id="menu-main-menu" class="menu">
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1032">
            <a href="home.php"><span>Home</span></a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1033">
            <a href="videos.php"><span>videos</span></a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1034">
            <a href="gallery.php">
              <span>gallery</span>
            </a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1035">
            <a href="about.php">
              <span>about</span>
            </a>
          </li>
          <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1036">
            <a href="contact.php">
              <span>contact</span>
            </a>
          </li>
      </nav>
    </div>
  </div>
</div>

活跃的

function updateMenu(url) {
    const active = document.querySelector('.menu-item.active');

    if (active !== null) {
        active.classList.remove('active');
    }

    const links = Array.from(document.querySelectorAll('.menu-item'));

    links.forEach(function (li) {
        let anchor = li.querySelector("a");
        if (url.indexOf(anchor.href) > -1) {
            li.classList.add("active");
        }
    });
}

updateMenu(window.location.href);

菜单中添加跨度

function menu_line() {
    var menu = jQuery('.main-menu.main_menu_container.menu_line_enable > ul');
    if (menu.length) {
        menu.each(function () {
            var menu = jQuery(this);
            var current = '';
            menu.append('<span class="menu_item_line"></span>');
            var menu_item = menu.find('> .menu-item');
            var currentItem = menu.find('> .active');
            var currentItemParent = menu.find('> .current-menu-ancestor');
            var line = menu.closest(".header_side").find('.menu_item_line');
            if (currentItem.length || currentItemParent.length) {
                current = currentItem.length ? currentItem : (currentItemParent.length ? currentItemParent : '');
                line.css({width: 25});
                line.css({left: current.find('>a').offset().left - menu.offset().left});
                line.css({marginLeft: 7});
            }

            menu_item.mouseenter(function () {
                line.css({width: jQuery(this).find('> a').outerWidth()});
                line.css({left: jQuery(this).find('> a').offset().left - jQuery(this).parent().offset().left});
                line.css({marginLeft: 0});
            });

            menu.mouseleave(function () {
                if (current.length) {
                    line.css({width: 25});
                    line.css({left: current.find('> a').offset().left - menu.offset().left});
                    line.css({marginLeft: 7});
                } else {
                    line.css({width: '0'});
                    line.css({left: '100%'});
                    line.css({marginLeft: 0});
                }
            });
        })
    }
}