移动元素上的引导弹出窗口答案

【问题标题】：Bootstrap popover on moving elements移动元素上的引导弹出窗口
【发布时间】：2014-06-03 14:12:14
【问题描述】：

我正在尝试在其位置可能会因手风琴而改变的元素上使用静态弹出框。然而，当手风琴被激活时，弹出框会停留在同一个地方。如何使弹出框相应地更改其位置？

下面是相关代码：

（在 JsFiddle 上：http://jsfiddle.net/gordianknot/VLmNM/1/ 例如，您可以单击任何部分）

HTML：

    <h3><a href="#">Section 1</a></h3>
    <div><p>Section 1 Content</p></div>

    <h3><a href="#">Section 2</a></h3>
    <div><p>Section 2 Content</p></div>

    </div>
    <br/>
    <a id="example" name="example" href="#" class="btn btn-danger">Example Button</a>

JS：

    $(function() {
        $("#accordion").accordion({ 
           collapsible: true, 
            autoHeight: false, 
            active: false 

        });

        $("#example").popover({
         trigger:'manual',
         placement: 'right',
         html: 'true',
         title : 'Test',
         content : 'Hello !',

        });

        $('#example').popover('show');
    });

【问题讨论】：

您应该提到您使用的是 v2.0.4。为什么不升级？
@davidkonrad 我已经在使用更新版本（只是忘了在 jsfiddle 中选择它）。所以这个问题在v3.1.1中也依然存在
_所以这个问题在 v3.1.1 中也依然存在

标签： jquery html twitter-bootstrap accordion popover

【解决方案1】：

也许这不是最优雅的解决方案，但它会做：

JQuery：

var hasMoved = false;
    $('#accordion').click(function () {
        if ($('#accordion').children('h3').hasClass('ui-state-active')) {


            if(!hasMoved) {
            $('.popover').animate({
                top: "+=60"
            }, 250);
              hasMoved = true;  
            }
        } else {
            $('.popover').animate({
                top: "-=60"
            } , 250);
            hasMoved = false; 
        }
    });

});

DEMO

【讨论】：

是的，虽然它与手风琴有关，但它可以工作 :) 谢谢
这不是一个好的解决方案，因为您已经静态设置了顶部偏移量。所以你能告诉我如果手风琴元素之一有额外的内容会发生什么！？查看您的演示，添加一些额外的内容jsfiddle.net/VLmNM/13 或添加新的手风琴项目！

【解决方案2】：

另一个解决方案是binding accordionchange 并使用top offset of button's current position。

$('#accordion').bind('accordionchange', 
function() {
   var element_height = $( "#example" ).height();
   $('.popover').animate({
            top: $( "#example" ).offset().top - element_height * 2
        } , 250);        
});

看看这个Demo Link

【讨论】：

【解决方案3】：

虽然这真的很老，不会被看到，但它可以作为其他有这个问题的人的参考。通过将触发器更改为悬停，它只会在您悬停时打开，但您的代码意味着它会自动打开。同样，这可以作为其他人的参考，这是一个更简单的解决方案。

【讨论】：