javascript - jQuery var width 在没有下拉菜单的情况下无法在菜单上工作

Question

目前正在尝试制作一个菜单，该菜单在鼠标悬停时或将 .active 添加到菜单时下方有箭头。一切都很好，除了它只适用于有下拉菜单的事实，而且 parent 的 child 也有箭头，这是我不想要的。请visit my test site如果使用 inspect 更容易发现故障。

下面是我想要的例子!

下面是我不想要的。

因此，正如您在上面看到的那样，它缺少箭头，这很奇怪，因为服务确实存在，但也存在于我想停止的服务的子服务上。因此，需要两个修复程序。

CSS 代码:

CSS 代码使用绝对定位，在没有 .active 的情况下，它使用 opacity:1，这意味着该元素仅在发生悬停或点击时可见。

.myribbon{
    opacity:0;
    position:absolute;
    left:0;
    bottom:80px;
    height:0;
    width:100%;
    border-left:50% solid transparent;
    border-right:50% solid transparent;
    border-top:20px solid #ff9800;
    z-index:-1;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.myribbon span{
    height:80px;
    bottom:100%;
    margin-bottom:20px;
    position: absolute;
    left:0;
    background:#ff9800;
}
.top-bar-section .active a .myribbon, .top-bar-section .active a:hover .myribbon{
    opacity:1;
    bottom:-20px;
}

JavaScript 代码:

脚本假定获取菜单项的宽度，以便箭头与菜单元素的宽度相同。

(function($) {
  $('.myribbon').each(function(){
    var width = $(this).width();
    $(this).css({
      'border-left': width/2 + 'px solid transparent',
      'border-right': width/2 + 'px solid transparent'
    })
    $('span', this).width(width).css('left', width/2*-1);
  })
})(jQuery);

HTML:

以下是未启用 JavaScript 的 HTML 代码。虽然它已启用，但它会将宽度值填充到跨度中，但在服务以外的菜单上的值是错误的。

<header class="contain-to-grid">
  <nav data-topbar="" class="top-bar">
    <ul class="title-area">
      <li class="name"><h1><a rel="home" title="TEST SITE" href="">TEST SITE</a></h1></li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>
    <section class="top-bar-section">
      <ul class="right">
        <li class="">
          <a href="/">
            <span class="myribbon" style=""><span style="width: 1140px; left: -570px;"> </span></span>
            Home
          </a>
        </li>
        <li class="menu-item menu-item-main-menu menu-item-services has-dropdown not-click" id="">
          <a href="#">
            <span class="myribbon"><span> </span></span>
            Services
          </a>
          <ul class="dropdown">
            <li class="menu-item menu-item-main-menu menu-item-example-1" id="menu-item-19">
              <a href="#">
                <span class="myribbon"><span> </span></span>
                Example 1
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </section>
  </nav>
</header>

Answer 1

你的功能区是绝对定位的，需要父级相对定位才能在正确的菜单下。

下拉菜单的位置是正确的

top-bar-section .has-dropdown {
 position: relative;
}

但对于其他菜单项，它不是相对定位的。为下面的选择器添加position: relative

.top-bar-section ul li {
  float: left;
}

上述修复也会自动修复宽度计算问题。