Question

我不是JavaScript向导，所以我很遗憾这里显而易见的东西。我有一个有多个链接的无序列表＆amp;当用户将鼠标悬停在<li>上时，他们会看到要点击该链接的链接，以便查看Twitter Bootstrap's pop-over behavior。

我的问题是

如果我打开一个新的，它不会关闭之前的pop-over。
如果再次将鼠标悬停在相同的“Tweet”图像上，它也会再次显示推文链接。

这是小提琴http://jsfiddle.net/ZnJ6b/17/，请看一下＆amp;试着帮助我。

js代码看起来像

 $("[data-toggle='popover']").popover({
    placement: 'right',
    html: 'true',
    title : '<span class="text-info"><strong>title</strong></span>',
    content : '<input id="subproject_id" type="text"/>'
});

$('.add_btn').click(function(e) {  
          $('.popover-title').append('<button id="popovercloseid" type="button" class="close">&times;</button>');
         $("#subproject_id").focus();//textbox focus
          $(this).css("display","inline");
          $(this).removeClass( "add_btn" ).addClass( "new_add_btn" );
      }); 
  $(document).click(function(e) {    
     if(e.target.id=="popovercloseid" ) { 
          $('.new_add_btn').popover('hide'); 
          $('.new_add_btn').css("display","none");
          $('.new_add_btn').removeClass( "new_add_btn" ).addClass( "add_btn" );

     }

  });

http://blog.alysson.net/lang/pt-br/twitter-bootstrap-popover-close-all-before-opening-a-new-one/链接似乎是教程，但我无法将其实现到上面的代码。有什么帮助吗？

Answer 1

您的代码有一些不必要的行，可以改变弹出窗口的行为。

我评论了一些内容并添加了这句话：

$('.add_btn').not(this).popover('hide');

这样一次只能显示一个弹出窗口。

<强> Demo

使用按钮关闭弹出窗口的代码：

$('html').on('click', '#popovercloseid', function (e) {
        $('.add_btn').not(this).popover('hide'); 
 });

<强> Demo 2

Answer 2

这实际上解决了这个问题： $（＆＃39; .popover＆＃39;）。each（function（）{$（this）.modal（＆＃39; hide＆＃39;）;}）;

Twitter bootstrap popover在打开一个新的之前关闭所有

2 个答案: