0

我正在使用 twitter 引导框架，我试图弄清楚如何为我的弹出框提供手风琴后备，
我想在悬停时显示弹出框，但我希望它在手风琴状态时被销毁（或隐藏）设置为“显示”。
当手风琴状态设置为“隐藏”时，我希望在悬停时再次显示弹出框..

我的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
谢谢

4

1 回答 1

0

首先，触发showandhidden事件的元素是可折叠元素，而不是它的容器。因此，切换弹出框可见性的正确选择器是#collapseOne，如下所示：

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

您还需要一种方法来防止弹出框在手风琴展开时显示。您可以通过将showandhide操作调整为#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。

于 2013-06-05T08:15:55.963 回答