Question

我创建了一个带有箭头的菜单，该菜单根据当前活动的菜单项水平滑动。这是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);

});

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

Answer 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.

Answer 2

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

Answer 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();

菜单下的滑动箭头

3 个答案: