Question

第一次点击时，Bootstrap弹出窗口打开，第二次点击时关闭。在这里，我想在第一次或第二次点击它时打开popover。

请建议我。

<i class="fa fa-file" id="popoverDwnFiles"></i>

$("#popoverDwnFiles").popover({
    html: true,
    content: function () {
        return $('#divDownloadContent').html();
    },
    title: '<span class="text-info">Exported Files</span>' +
   '<button type="button" id="close" class="close" onclick="$(&quot;#popoverDwnFiles&quot;).popover(&quot;hide&quot;);">&times;</button>',
    placement: 'bottom'   
});

Answer 1

将trigger设置为manual并在点击事件中手动show。

$("#popoverDwnFiles").popover({
    html: true,
    content: function () {
        return $('#divDownloadContent').html();
    },
    title: '<span class="text-info">Exported Files</span>' +
    '<button type="button" id="close" class="close" onclick="$(&quot;#popoverDwnFiles&quot;).popover(&quot;hide&quot;);">&times;</button>',
    placement: 'bottom',
    trigger: 'manual'
}).on('click', function (event) {
    $("#popoverDwnFiles").popover('show');
});

DEMO：http://jsfiddle.net/VUZhL/2154/

Answer 2

默认情况下，当再次单击popover触发器元素时，popover关闭，但它的默认行为可以被trigger: 'manual'覆盖

＆＃13;

$("#popoverDwnFiles").popover({
    html: true,
    content: function () {
        return $('#divDownloadContent').html();
    },
    title: '<span class="text-info">Exported Files</span>' +
        '<button type="button" id="close" class="close" onclick="$(&quot;#popoverDwnFiles&quot;).popover(&quot;hide&quot;);">&times;</button>',
    placement: 'bottom',
    trigger: 'manual',
}).click(function (e) {
    e.preventDefault();
}).click(function (e) {
    $(this).popover('show');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<i class="fa fa-file btn" id="popoverDwnFiles">Open Me</i>

＆＃13;

Fiddle

单击时始终打开Bootstrap popover

2 个答案: