Bootstrap 弹出框：打开一个带有 2 个不同链接的弹出框答案

【问题标题】：Bootstrap Popover : open one popover with 2 different linksBootstrap 弹出框：打开一个带有 2 个不同链接的弹出框
【发布时间】：2016-08-01 15:28:40
【问题描述】：

您好（如果我的英语不太对，请见谅），

我正在尝试使用 2 个不同的链接切换相同的弹出框。

例如：

第一个链接 - 弹出框附加到它

第二个链接 - 可以在第一个链接上打开弹出框

我试过了：

<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">1st link</a>

<div id="popover-content" class="hide">
   test
</div>

<a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">2nd link (open the popover on the first link)</a>

但它不起作用，它复制了弹出框。

这是我的Bootply：http://www.bootply.com/jAGRX9hm1a

谢谢

【问题讨论】：

标签： javascript jquery html twitter-bootstrap bootstrap-popover

【解决方案1】：

$(document).ready(function()
{
   var t= $(".pop-contact").popover({
        html: true,
        content: function() {
            return $('#popover-content').html();
        }
    });
  
  var shown=false;
  
t.on('show.bs.popover', function () {
   shown=true;
});
  
  t.on('hide.bs.popover', function () {
   shown=false;
});
  
  
  $('.pop-contact2').click(function(e){
    e.preventDefault();
    if(shown)
    t.popover('hide');
    else
       t.popover('show');     
  });
  
});

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">1st link</a>

<div id="popover-content" class="hide">
   test
</div>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="pop-contact2" type="button"   id="contact">2nd link</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="pop-contact2"   type="button"   id="contact">3nd link</a>

【讨论】：

太好了！只是有一点小问题。如果您使用第一个链接打开弹出框，则无法使用第二个链接将其关闭（但是您可以看到许多链接都可以正常工作：bootply.com/2E5aFtCHPO）
你可以让弹出框在鼠标离开时关闭data-trigger="focus"，让我看看如何让它切换
编辑了片段以帮助解决它，在每个链接上切换以影响初始或主弹出窗口
hide 和 show 比自动执行此操作的切换更有效

【解决方案2】：

这实际上是一样的，内容仍然只显示在第一个链接上。

$(document).ready(function()
{
   var t= $(".pop-contact").popover({
        html: true,
        content: function() {
            return $('#popover-content').html();
        }
    });
  
  var shown=false;
  
t.on('show.bs.popover', function () {
   shown=true;
});
  
  t.on('hide.bs.popover', function () {
   shown=false;
});
  
  
  $('.pop-contact2').click(function(e){
    e.preventDefault();
    if(shown)
    t.popover('hide');
    else
       t.popover('show');     
  });
  
});

 <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <a class="pop-contact" data-placement="bottom" data-toggle="popover" data-title="Contact" data-container="body" type="button" data-html="true" id="contact">1st link</a>

<div id="popover-content" class="hide">
   test
</div>


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="pop-contact2" type="button"   id="contact">2nd link</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="pop-contact2"   type="button"   id="contact">3nd link</a>

【讨论】：