引导酥料饼：打开一个酥料饼用2个不同的链接

Question

喜（如果我的英语是不是啊对不起），

我试图切换同酥料饼但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

谢谢

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