jquery - 菜单项下的箭头

Question

我制作了一个带有箭头的菜单，该箭头在点击的元素下方滑动。箭头是带有“标记”类的 div。

HTML:

<div class="services-block">
  <div id="services-carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner services" role="listbox" >
      <div class="item active" id="services">
        <ul class="tabbed-menu menu-list">
          <li><a href="javascript:rudrSwitchTab('tb_1', 'content_1');" id="tb_1" class="tabmenu active">Consultanță IT</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_2', 'content_2');" id="tb_2" class="tabmenu">Managementul Relațiilor cu Clienții</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_3', 'content_3');" id="tb_3" class="tabmenu">Business Intelligence</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_4', 'content_4');" id="tb_4" class="tabmenu">Turism și Ospitalitate</a></li>
          <li><a href="javascript:rudrSwitchTab('tb_5', 'content_5');" id="tb_5" class="tabmenu">Finanțe și Bănci</a></li>
          <li><a class="right carousel-control" href="#services-carousel" role="button" data-slide="next">Mai multe <img src="images/right-arrow.png" alt=""></a></li>
       </ul>                 
     </div> <!--/.item active-->

   </div> <!--/.carousel-inner-->
   <div id="marker"></div>
 </div> <!--/#services-carousel-->
</div> <!--services-block-->

jQuery:

  $("#services ul > li").click(function(event){
    var position = $(this).position();
    var width    = Math.round($(this).width()/2) - 5;
    $("#marker").css('left', 'auto').transition({ x: position.left + width });
    event.preventDefault();
  })

因此，当页面加载时，标记向左移动 14% 以便位于元素中心下方。我在 jQuery 中删除了这种样式，因为当单击另一个元素时，将添加这 14% 并且标记不会滑动 到下一项的中心。这就是问题所在，当我单击以下元素时，左侧的属性被设置为自动，这使得箭头向左滑动，靠近宽度为 100% 的 ID 为“服务”的 div 的左边距, 然后它滑到点击的同上中心下方。所以，我希望箭头移动到下一个元素而不先向左滑动。有谁知道我该如何解决这个问题？

CSS:

#marker {
background: transparent url("http://cdn7.unit4.com/images/theme/2014/icons/down.png") no-repeat scroll 50% 50%;   
height: 16px;
left: 14%;
position: absolute;
z-index: 1;
width: 45px;}

Answer 1

只需要如下修改脚本，如果你想让标记平滑移动，添加css过渡效果。我创建了一个工作示例 HERE用你的代码和一些随机的 CSS

$("#services ul > li").click(function(event){
    var position = $(this).position().left;
    var width = Math.round($(this).width()/2) - 5;
    var arrowPos = position + width;
    $('#marker').css('left', arrowPos);
    event.preventDefault();
  });