Question

我的网页上有一个表格，我有一个最大宽度为400px的单元格。我隐藏了溢出文本，点击它后我使用bootstrap（3.3.6）popover来显示全文。

我想要的是在下一次点击时关闭弹出窗口。如果我单击文本，则会出现弹出窗口。我再次点击文字，它就消失了。

但如果我通过点击屏幕上的其他任何地方“关闭”弹出窗口，然后我“重新打开”弹出窗口并尝试再次点击文本关闭它，它就不会消失。

基本上：

点击文字 - ＆gt;弹出窗口
再次点击文字 - ＆gt; popover消失
点击文字 - ＆gt;弹出窗口
点击其他地方，而不是文字 - ＆gt; popover消失
点击文字 - ＆gt; popover appers
再次点击文字 - ＆gt; popover不会消失

我的CSS：

.td-review {
margin: 0 auto;
width: 400px;
max-width : 400px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}

我的HTML：

<table>
        <tr>
            <td class="td-middle" colspan="2">
                <div tabindex="0" class="td-review" role="button" data-container="body" data-toggle="popover"
                     data-trigger="focus" data-placement="bottom" data-animation="true"
                     data-content="I'm a popover">
                    long long long text...
                </div>
            </td>
        </tr>
    </table>"

我的Javascript：

$(function () {
$('html').on('click', function (e) {

    $('[data-toggle="popover"]').each(function () {
        if (!$(this).is(e.target)
            && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
        else {
            $(this).popover('toggle');
        }
    });

    $('.popover').css('display', 'none');
    $('[data-toggle="popover"]').each(function () {
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $('.popover').css('display', 'block');
        }
    });
});});

感谢您的帮助！

通过单击外部弹出窗口隐藏它后，在buttonclick上隐藏Bootstrap Popover

0 个答案: