javascript - Twitter Bootstrap：打开时隐藏其他弹出窗口

Question

以下引导代码为我提供了“粘性”弹出框（因此用户可以与弹出框内的内容进行交互）。问题是当一个弹出窗口打开时，其他弹出窗口应该关闭（隐藏）。知道如何实现吗？

$("[rel=popover]").popover({placement:'bottom', trigger:'manual'}).hover(function(){
    $(this).popover('show');
    e.preventDefault(); 
});

Answer 1

这里有一个非常简单的解决方案（不是我的解决方案，但效果很好）：

$('.link-popover').click(function(){
    $('.link-popover').not(this).popover('hide'); //all but this
});

Answer 2

根据引导文档：使用焦点触发器在用户下次单击时关闭弹出窗口。

<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-   trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Answer 3

我一直在玩这个，还有一些关于触发手动显示/隐藏以使其正常播放的问题。悬停实际上是mousein，mouseout除非你添加一些额外的检查，否则你会遇到我刚刚做的问题！

这是我的实际解决方案，我将尝试解释我所做的事情。

$(function () {

    var overPopup = false;

    $('[rel=popover]').popover({
        trigger: 'manual',
        placement: 'bottom'

    // replacing hover with mouseover and mouseout
    }).mouseover(function (e) {
        // when hovering over an element which has a popover, hide
        // them all except the current one being hovered upon
        $('[rel=popover]').not('#' + $(this).attr('id')).popover('hide');
        var $popover = $(this);
        $popover.popover('show');

        // set a flag when you move from button to popover
        // dirty but only way I could think of to prevent
        // closing the popover when you are navigate across
        // the white space between the two
        $popover.data('popover').tip().mouseenter(function () {
            overPopup = true;
        }).mouseleave(function () {
            overPopup = false;
            $popover.popover('hide');
        });

    }).mouseout(function (e) {
        // on mouse out of button, close the related popover
        // in 200 milliseconds if you're not hovering over the popover
        var $popover = $(this);
        setTimeout(function () {
            if (!overPopup) {
                $popover.popover('hide');
            }
        }, 200);
    });
});

这对我来说非常适合以下html：

<a href="#" id="example1" class="btn large primary" rel="popover" data-content="Example 1!!!" data-original-title="Example 1 title">Button 1</a>
<a href="#" id="example2" class="btn large primary" rel="popover" data-content="Example 2!!!" data-original-title="Example 2 title">Button 2</a>
<a href="#" id="example3" class="btn large primary" rel="popover" data-content="Example 3!!!" data-original-title="Example 3 title">Button 3</a>

希望能帮到你:)

Answer 4

使用Bootstrap 3 的事件回调，您可以：

$(document).on('show.bs.popover', function() {
  $('.popover').not(this).popover('hide');
});

在咖啡脚本中

$(document).on 'show.bs.popover', ->
    $('.popover').not(this).popover('hide')

Answer 5

关闭所有其他弹出窗口的 Simpiet 解决方案。这可以添加到任何将出现弹出窗口的事件中，例如单击/悬停等。就在您在以下代码中显示弹出窗口粘贴之前：

$('.popover').not(this).hide(); //Hides all other popovers

这将删除页面上除当前弹出框之外的所有弹出框

Answer 6

$('li').popover({
    title: 'My title',
    content: 'My content'
})
.on('show.bs.popover', function() {
    if (window._bsPopover) {
        $(window._bsPopover).popover('hide')
    }
    window._bsPopover= this;
})
.on('hide.bs.popover', function() {
   window._bsPopover= null; // see Peter Jacoby's comment
});

Answer 7

我为我的内容使用了一个函数，所以我有（在咖啡脚本中）：

provideContentForPopover = (element) ->
  $('.some-selector').not(element).popover 'hide'
  "some content to be returned"

$('.some-selector').popover
  content: -> provideContentForPopover @

Answer 8

我为我的内容使用了一个功能，它工作正常。

$(function () {                     
    $('[data-toggle="popover"]').click(function(){
        $(this).popover('toggle');
        $('[data-toggle="popover"]').not(this).popover('hide'); //all but this
    });
})

Answer 9

$('.allThePopovers').click(function () {
    if ($(this).hasClass('popoverIsOpen')) {
        $(this).removeClass('popoverIsOpen');
    } else {
        $('.popoverIsOpen').popover('hide');
        $('.allThePopovers').removeClass('popoverIsOpen');
        $(this).addClass('popoverIsOpen');
});

只需将 click 替换为 hover 或 mousein 即可满足您的需求。

Answer 10

更简单的方法来完成这项工作：

$('[rel=popover]').popover({
    trigger: 'manual',
    placement: 'bottom'
}).click(function(e) {
    $('[rel=popover]').not('#' + $(this).attr('id')).popover('hide');
    var $popover = $(this);
    $popover.popover('toggle');
});

只需确保您的弹出框具有唯一的 id ;] 您的弹出框将按照默认方式运行，一次只有一个弹出框。

Answer 11

我发现动态弹出框存在一些问题，所以这里有两种静态和动态弹出框的解决方案：

第一个解决方案是使用 popover 选项triger:'focus' ，但此选项在某些 android 设备上不起作用

第二个：

$('body').popover({
    html: true,
    //this is for static and dynamic popovers
    selector: '[data-toggle="popover"]',
    trigger: 'click',
    content: function () {
        //i am using predefined content for popovers. replace with your code or remove at all
        return $($(this).data('templateselector') + ' .content').html();
    },
    title: function () {
        return $($(this).data('templateselector') + ' .title').html();
    },
    container: 'body'
}).on('show.bs.popover', function (e) {
    // i've found that showed popovers has aria-describedby
    // and $('[data-toggle="popover"]).not(this) not working for dynamic popovers so i came with this:
    $('[data-toggle="popover"][aria-describedby]').popover('hide');
    var trigger = $(e.target);
    // this is for adding custom class for popover container
    // just remove it if you dont need
    trigger.data('bs.popover').tip().addClass($(trigger).data('class'));
});

Answer 12

我可以通过隐藏不是被点击的弹出框来完成类似的操作。我不确定，但它似乎对我很有效。这是为了在单击时显示弹出框并保持活动状态。单击另一个弹出框时它会被隐藏。

<script>
$(function () {
    $('[rel=popover]').popover({
    }).click(function (e) {
        $('[rel=popover]').not('#friend_' + $(this).attr('id')).popover('hide');
    });
});
</script>

Answer 13

如果您只想一次打开一个弹出框，通过单击打开和关闭（光标位置无关紧要），这很好用：

$('[data-toggle="popover"]').popover({  html: true }).bind("click", function(){ 

  if(!$(this).parent().children("a").first().is(":hover"))
   $( '[data-toggle="popover"]').popover("hide"); 
  else
   $( '[data-toggle="popover"]').not($(this).parent().children("a").first()).popover("hide"); 

 return false;  
});

重要的是每个弹出窗口都有一个单独的父级，例如

<ul> <li> <popover> </li> <li> <popover> </li> </ul>

HTML：

 <li>  
  <a id="quickmenu-i-305" data-toggle="popover" data-placement="bottom" data-title="Title" data-content='<h2>Plesk Login</h2>' href="Plesk Login">Ihr Kundenbereich</a> 
 </li>

Answer 14

当您将鼠标悬停在或单击其他元素以打开弹出框时，使用此方法隐藏所有其他弹出框

一二三四

$(document).ready(function(){    
    $('.btnPopover').mouseover(function(){    
    $(this).popover({
        html: true,
        trigger: 'manual'
    }).popover('show');
        $('.btnPopover').not(this).popover('hide');
    }); 
});

确保将 bootstrap.js 和 bootstrap.css 添加到您的页面。希望这可以帮助。

干杯！！苏拉杰·库马尔

Answer 15

为了兼容性，您必须使用<a>锚标记。

我的小提琴： https ://jsfiddle.net/oneflame/pnb8Ltj3/

引导链接——http : //getbootstrap.com/javascript/#dismiss-on-next-click

<div id="FragmentText1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, est laborum.
</div>

$(document).ready(function(){               
  $('a.LexicalEntry').popover({ 
    html : true,    
    content: function() {
      return getLexicalDefinition($(this).text());
    }   ,   
    trigger: 'focus',
    placement: 'auto',
    html: true,
    container: 'body'
  });
});

// *** Injects HTML into raw text.
// *** Splits the content string using a whitespace regular expression. 
$('#FragmentText1').each(function() {

    // var words = $.trim( $(this).text() ).split(/\s+/g);

    var $this = $(this);
    $this.html(
        $this.text().trim().replace(/\b(\w+)\b/g,
            "<a tabindex='0' class='LexicalEntry'' role='button' title='Definition: $1'>$1</a>"
        ));

});