无法让这个 CSS/jQuery 下划线动画工作，我做错了什么？

Question

我正在尝试将这个很酷的滑动下划线动画集成到我的 Wordpress 导航标题中（Storefront 子主题，如果这很重要），但它没有正常运行（根本没有）。您可以在此处查看原始代码笔。下面是我为我的网站调整代码的尝试。作者的 codepen 示例显示了鼠标单击时的动画，但我希望它显示出来hover。而且我只想要下划线动画，不关心链接的颜色变化，所以我尝试删除不必要的部分。我已将我的 JS 文件放入 Wordpress 的functions.php 中。我很确定它加载了，我通过向alert确实弹出的 .js添加一个来测试它当我的代码运行时，什么也没有发生。我在调试这个时遇到了麻烦，因为我有点被困在 Wordpress 沙箱中，并且对 WP 和 JS 都非常缺乏经验。我很有可能在 .js 的某个地方犯了一个非常基本的错误，我可能没有正确定位链接。也将感谢任何巧妙的方法来循环链接指向它们各自的moveToIndex号码的建议！jQuery(function() {  var currentIndex = 1;  // Always moving to same item, just to test  $(".menu a").hover(function() {    moveToIndex(2);  });  function moveToIndex(idx) {    if (idx === currentIndex)      return;    var fromTab = $(".menu li:nth-child(" + currentIndex + ")"),      toTab = $(".menu li:nth-child(" + idx + ")"),      underlineborder = $(".underlineborder"),      animationDuration = 150;    var fromLeft = 0,      fromRight = 0,      toLeft = toTab.offset().left - toTab.parent().offset().left,      toRight = toTab.offset().left + $(toTab).width();    if (fromTab.length > 0) {      fromLeft = fromTab.offset().left - fromTab.parent().offset().left;      fromRight = fromLeft + fromTab.width();    }    $(".menu a").removeClass("active");    toTab.addClass("active");    underlineborder.animate({      left: currentIndex < idx ? fromLeft : toLeft,      width: currentIndex < idx ? toRight - fromLeft : fromRight - toLeft    }, animationDuration).animate({      left: toLeft,      width: toTab.width()    }, animationDuration);    currentIndex = idx;  }  // initialize tabs  moveToIndex(1);});.menu li {  cursor: pointer;  display: inline-block;  margin: 5px 7px 10px 7px;  opacity: .65;  transition: .3s transform;}.menu li.active {  cursor: default;  opacity: 1;  text-shadow: 0 0 4px rgba(0, 0, 0, .8);  transform: translateY(-3px);}.underlineborder {  background: red;  border-radius: 5px;  cursor: default;  position: absolute;  height: 3px;  width: 10px;  margin: 0;  opacity: 1;  bottom: 0;  left: 0;}