无法使用 jQuery 获取跨度位置

Cannot get span position with jQuery

本文关键字：位置 获取 jQuery      更新时间：2023-09-26

我这里有这个导航，我需要使子菜单与顶部菜单锚文本对齐。

我可以通过使用 css 将整个内部ul向左移动来做到这一点。但对于每个li元素来说，这是一个不同的数量。由于我的锚点需要与li一样大，因此我在文本周围创建了一个跨度，我的计划是测量它与父级的距离，并将该数字应用于内部 ul left属性。这是我到目前为止所拥有的：

    jQuery(document).ready(function(){
      menuAlign();
    });
    function menuAlign(){
      $('nav.main-nav > ul > li:not(.small)').each(function(){
        var self = $(this);
        var innerMenu = self.children('ul');
        var posOffset = self.children('.pos').position();
        innerMenu.css( "left", posOffset.left );
      });
    }

我在这一行得到一个错误innerMenu.css( "left", posOffset.left );说：

未

捕获的类型错误：无法读取未定义的属性"left"

我做错了什么？有没有办法用CSS来实现这一点？

我稍微改变了你的menuAlign()函数，因为我认为它在实际位置的不同位置用class="pos"看起来span。希望它以改进的方式工作：-）小提琴

function menuAlign() {
    $('nav.main-nav > ul > li:not(.small)').each(function () {
        var self = $(this);
        var innerMenu = self.children('ul');
        var parent = innerMenu.parent();
        var posLeft = parent.find(".pos").position().left;
        innerMenu.css("left", posLeft);
    });
}

从nav.main-nav > ul > li > ul中删除margin可能会对您有所帮助。小提琴。我还在nav.main-nav > ul > li > ul > li中添加了一些padding。

.clearfix:after {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
body {
  font-family: 'Open Sans', sans-serif;
  overflow-x: hidden;
  /* trick for navigation */
}
nav.main-nav > ul {
  padding: 0;
  background-color: #f6a000;
  border-bottom: 1px solid #fff;
}
nav.main-nav > ul > li {
  display: inline-block;
  position: relative;
  z-index: 100;
  width: 30%;
  height: 60px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border-right: 1px solid #fff;
  float: left;
}
nav.main-nav > ul > li.small {
  width: 2%;
}
nav.main-nav > ul > li > a {
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
  line-height: 60px;
  font-size: 16px;
  color: #fff;
}
nav.main-nav > ul > li > ul {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  padding: 0;
  _margin: 0 -1000em;
  z-index: 101;
  visibility: hidden;
  opacity: 0;
  background-color: #F67900;
  list-style: none;
}
nav.main-nav > ul > li:hover {
  background-color: #F67900;
}
nav.main-nav > ul > li:hover > ul {
  visibility: visible;
  opacity: 1;
}
nav.main-nav > ul > li > ul > li {
  padding: 20px;
}
nav.main-nav > ul > li > ul > li > a {
  color: #fff;
  font-size: 16px;
}
nav.main-nav > ul > li:hover .drop {
  font-weight: bold;
}
<nav class="main-nav">
  <ul class="clearfix">
    <li> <a href="#"><span class="pos">about us</span></a>
      <ul>
        <li><a href="#">who we are</a>
        </li>
        <li><a href="#">what we do</a>
        </li>
        <li><a href="#">where we are</a>
        </li>
        <li><a href="#">other information</a>
        </li>
      </ul>
    </li>
    <li> <a href="#"><span class="pos">accomodation</span></a>
      <ul>
        <li><a href="#">apartments</a>
        </li>
        <li><a href="#">hotels</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

相关文章：