菜单项下的箭头答案

【问题标题】：arrow under menu item菜单项下的箭头
【发布时间】：2015-08-05 12:58:55
【问题描述】：

我制作了一个带有箭头的菜单，它在点击的项目下方滑动。箭头是带有“marker”类的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% 并且标记不会滑动到下一个项目的中心。这就是问题所在，当我单击以下项目时，属性 left 被设置为 auto，这使得箭头向左滑动，靠近 id 为 'services' 的 div 的左边距，其宽度为 100% ，然后它滑到点击的同上的中心下方。所以，我希望箭头移动到下一个项目而不先向左滑动。有谁知道我该如何解决这个问题？

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;}

【问题讨论】：

你能加个jsfiddle吗？

标签： jquery css

【解决方案1】：

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

$("#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();
  });

【讨论】：