Question

我正在使用<button>元素正确地关闭bootstrap 3 popovers问题。

当需要点击新按钮或点击现有按钮的焦点时，弹出窗口应该关闭。

这在一定程度上起作用，我认为按钮确实隐藏但未正确关闭。因此，如果有按钮x y z，我会通过点击x正确显示弹出来启动实例。

现在点击下一次点击...说z。 x将隐藏，z将显示。

到目前为止这么好吗？

当我再次点击x时，会完全关闭按钮（无显示），随后的点击会显示x。

简而言之，单击关闭焦点会隐藏弹出窗口，但它不会完全关闭它。导致双击按钮再次显示它，而不是单击。

供参考，请参阅下面的html和js：

HTML

<button type="button" class="btn btn-default videos-popover-button" href="#" data-container="body" data-toggle="popover" data-trigger="click" data-placement="bottom" data-html="true" data-content='
<p>{{{description}}}</p>
<form class="video-favorite-mobile">
    <input type="checkbox" checked="" name="favorite" value="favorite">
</form>
<form class="video-queue-mobile">
    <input type="checkbox" checked="" name="queue" value="queue">
</form>
<a href="{{link}}" title="{{name}}" data-video-width="{{width}}" data-video-height="{{height}}" data-description="{{description}}"{{#allow_downloads}}{{#download}} data-download-{{quality}}="{{link}}"{{/download}}{{/allow_downloads}}>watch now</a>'
data-trigger="focus" href="#" style="cursor: pointer;">
<img alt="{{name}}" src="{{thumbnail_large}}">
<div class="video-gallery-single">
    <p>{{{description}}}</p>
</div>
<div class="video-gallery-bottom">
    <form class="video-favorite">
        <input type="checkbox" checked="" name="favorite" value="favorite"
        data-toggle='tooltip' data-placement='bottom' 
        data-original-title='add to favorites'>
    </form>
    <form class="video-queue">
        <input type="checkbox" checked="" name="queue" value="queue" 
        data-toggle='tooltip' data-placement='bottom' 
        data-original-title='add to queue'>
    </form>
    <a href="{{link}}" title="{{name}}" data-video-width="{{width}}" data-video-height="{{height}}" data-description="{{description}}"{{#allow_downloads}}{{#download}} data-download-{{quality}}="{{link}}"{{/download}}{{/allow_downloads}}>watch now</a>
</div>
</button>

JS

jQuery(document).ready(function($) {
    $('body').on('click', function (e) {
        $('[data-toggle="popover"]').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
      });
    });

});

Answer 1

您需要data-trigger="click"吗？

如果您将data-trigger设置为focus，则应该能够在没有任何其他javascript的情况下点击远离它时解除弹出窗口（除非您正在寻找不同的行为）。

Bootstrap documentation: Dismissible popover

修改

您的评论：

“尝试使用data-trigger =”focus“它会破坏移动浏览器特有的iOS功能。”

您使用button元素作为弹出窗口触发器。以下是文档的内容：

解雇下一次点击所需的特定标记要获得正确的跨浏览器和跨平台行为，您必须使用<a>标记，而不是<button>标记，并且还必须包含role="button"和tabindex属性。

Bootstrap 3 Popover on Button未正确关闭

1 个答案: