Bootstrap Popover：打开一个带有2个不同链接的popover

Question

嗨（对不起，如果我的英语不对，）

我正在尝试切换相同的弹出框，但有两个不同的链接。

例如：

第一个链接 - Popover附加到它

第二个链接 - 可以在第一个链接上打开popover

我尝试过这样做：

<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>

但它不起作用，它复制了popover。

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

谢谢

Answer 1

＆＃13;

＆＃13;

$(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');     
  });
  
});

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13;

Answer 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>