引導酥料餅：打開一個酥料餅用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>