Question

我试图在一个元素上使用静态弹出框，其位置可能会因手风琴而改变。然而，当手风琴被激活时，弹出窗口保持在同一位置。如何启用popover来相应地更改其位置？

以下是相关代码：

（在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');
    });

Answer 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

Answer 2

另一种解决方案是binding accordionchange 并使用top的{{1}} offset。

button's current position

查看此Demo Link

Answer 3

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

Bootstrap popover在移动元素上

3 个答案: