菜单下的滑动箭头答案

【问题标题】：sliding arrow under menu菜单下的滑动箭头
【发布时间】：2015-08-10 12:32:38
【问题描述】：

我创建了一个菜单，其下方有一个箭头，它会根据当前活动的菜单项水平滑动。这是 HTML

<div class="services-block">
    <div id="services-carousel" class="carousel slide" data-ride="carousel">
       <div class="carousel-inner services" role="listbox"  id="services">
          <div class="item active">
             <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>
       </div> <!--/.carousel-inner-->
       <div id="marker"></div>
   </div> <!--/#services-carousel-->

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;
    transition: .4s left ease-in;}

我使用这个脚本来移动箭头（div#marker）

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

});

它工作正常，除了当我调整浏览器窗口大小时，箭头保持在调整窗口大小之前的位置；它不会滑到项目的中心下方。有谁知道我该如何解决这个问题？这里也是截图，这里的窗口是调整大小的

【问题讨论】：

我不认为你当前的脚本可以完全重用来实现这一点。但是你需要一个类似的在窗口调整大小时触发。你打电话给它：window.onresize = yourFunction
我猜你必须在 resize 事件中添加一些代码。

标签： jquery html

【解决方案1】：

所以当你调整浏览器大小时是这样的：

$(window).resize(function(){
    var _this = $('.tabmenu.active'); //<----the current active tab;
    var position = _this.position().left; // update the position
    var width = Math.round(_this.width()/2) - 5; // calc the width
    var arrowPos = position + width; // add value for position
    $('#marker').css('left', arrowPos); // set the same marker position left
}).resize(); // <----trigger it on dom ready.

【讨论】：

当我将它与我的脚本结合时，我得到了我想要的结果

【解决方案2】：

您可以确保position: absolute 位于不调整大小的元素的上下文中，而不是使用调整大小事件来强制解决问题。找出导航中哪个div 不会改变大小，add position: relative to it，并确保div#marker 是那个div 的子级。

【讨论】：

【解决方案3】：

这给了我想要的结果

$("#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);   
   });
   $(window).resize(function(){
     var _this = $('#services li a.active'); //<----the current active tab;
     var position = _this.position().left; // update the position
     var width = Math.round(_this.width()/2) - 5; // calc the width
     var arrowPos = position + width; // add value for position
     $('#marker').css('left', arrowPos); // set the same marker position left
 }).resize();

【讨论】：