twitter bootstrap popover和手風琴

Question

我正在使用twitter bootstrap框架，並且試圖找出如何為我的彈出窗口提供手風琴后備，
我想在懸停時顯示彈出窗口，但是當在“ shown”上設置手風琴狀態時，我希望它被破壞（或隱藏）。
當手風琴的狀態設置為“隱藏”時，我希望在懸停時再次顯示彈出窗口。

我的html代碼：

<div class="row">
<div class="span4 offset4 text-center accordion" id="#accordion2">
    <div class="accordion-group">
        <div class="accordion-heading"> <a href="#collapseOne" class="accordion-toggle btn" id="pop-prize" data-toggle="collapse" data-parent="#accordion2" data-placement="bottom" title="Fantabulous title">
                                    PUSH ME
                                </a> 
        </div>
        <div id="collapseOne" class="accordion-body collapse evo-text-justify">Some lorem ipsum here.. Lorem.
            <br>Other ipsum text as well.</div>
    </div>
</div>

腳本部分：

var contenuto = "Some lorem ipsum here.. Lorem.<br> Other ipsum text as well.";

$('#pop-prize').popover({
    html: true,
    title: "Fantabulous title",
    content: contenuto,
    trigger: 'manual'
}).hover(function (e) {
    jQuery(this).popover('toggle');
});
$('#accordion2').on('shown', function (e) {
   //popover hide here
    jQuery('#pop-prize').popover('hide');
});
$('#accordion2').on('hidden', function (e) {
   //popover back to be shown on hover
   jQuery('#pop-prize').popover('show');
});

jsfiddle
謝謝

Answer 1

首先，觸發show和hidden事件的元素是可折疊元素，而不是其容器。 因此，切換彈出窗口可見性的正確選擇器是#collapseOne ，如下所示：

$('#collapseOne').on('show', function (e) {
    jQuery('#pop-prize').popover('hide');
});
$('#collapseOne').on('hidden', function (e) {
   jQuery('#pop-prize').popover('show');
});

您還需要一種防止手風琴展開時彈出窗口顯示的方法。 您可以通過以下方式將show和hide操作設置為#collapseOne狀態來實現此#collapseOne ：

$('#pop-prize').on('mouseenter', function (e) {
    if ($('#collapseOne').not('.in').length)
        jQuery(this).popover('show');
});
$('#pop-prize').on('mouseleave', function (e) {
    if ($('#collapseOne').not('.in').length)
        jQuery(this).popover('hide');
});

在這里，您有完整的jsfiddle 。