动态改变指向箭头指向点击源

Question

我目前正在尝试创建一个弹出对话框，该对话框应指向触发其外观的元素。当用户点击第一个按钮时，箭头应该指向按钮的中间，以此类推。

我知道如何用css创建指向箭头，但问题是如何动态定位它以指向触发其外观的按钮。

请检查此的jsfiddle HERE

/* ========== CSS ========== */ 
 
.container { 
 
     background:white; 
 
     -webkit-border-radius: 10px; 
 
     -moz-border-radius: 10px; 
 
     border-radius: 10px; 
 
     width:100%; 
 
     height:150px; 
 
     display: block; 
 
     position: relative; 
 
     margin-top:20px; 
 
} 
 
    
 
#pointer { 
 
     border-bottom:solid 10px #FFF; 
 
     border-left: solid 8px transparent; 
 
     border-right: solid 8px transparent; 
 
     position:absolute; 
 
     width: 0; 
 
     height: 0; 
 
     top: -10px; 
 
     right: 20px; 
 
}

<!-- ============== HTML =============== --> 
 
<div class="btn-group" role="group" aria-label="..."> 
 
    <button type="button" class="btn btn-default">Left</button> 
 
    <button type="button" class="btn btn-default">Middle</button> 
 
    <button type="button" class="btn btn-default">Right</button> 
 
</div> 
 
    
 
<div class="container">  
 
    <div id="pointer"></div> 
 
</div>

你觉得呢？谢谢。

Answer 1

这将让你开始。

注意，CSS上的指针改为从right到left

$('.btn').click(function() { 
    var $btn = $(this), 
     position = $btn.position(), 
     width = $btn.width(); 

    var pointerLeft = position.left + width/2; 

    $('#pointer').css('left', pointerLeft) 
}); 

DEMO

Answer 2

您需要计算单击按钮的left位置并添加其半宽以将#pointer定位在中心位置。

CSS

.btn-group { 
    position: relative; 
} 

jQuery的

$('button').click(function(e) { 
    var offset = $(this).position().left + ($(this).width()/2); 
    $('#pointer').css({'left': offset}); 
}); 

的JavaScript

var buttons = document.getElementsByTagName('button'); 
var pointer = document.getElementById('pointer'); 
var pointerWidthOffset = pointer.offsetWidth/2; 

for (var i = 0; i < buttons.length; i++) { 
    buttons[i].addEventListener('click', function(e) { 
     var offset = e.target.offsetLeft + (e.target.offsetWidth/2) - pointerWidthOffset; 
     pointer.style.left = offset + "px"; 
    }, false); 
}