Закрыть предыдущий прохожий, нажав в следующий список

Question

На моей странице много popover, и я хочу закрыть предыдущее открытое popover, нажав на следующий popover.

Это работает! но когда я снова нажимаю на предыдущее popover, я должен щелкнуть дважды!

Я также хочу, чтобы popover был закрыт, щелкнув снаружи.

$('.triggerOverlay').popover({ 
html : true, 
content: function() { 
     var $this = $(this); 
     var cont = $this.data('toggle'); 
     return $('#'+cont).html(); 
}}); 

Следующий код для закрытия всех поповер кроме текущего

$('.triggerOverlay').on('click', function (e) { 
    $('.triggerOverlay').not(this).popover('hide'); 
}); 

Fiddle

https://jsfiddle.net/yasirhaleem/43qfkjtb/

Answer 1

Это должно работать. Добавьте в документ слушателя событий click и всегда скройте свои popovers.
Если цель события является одним из ваших якорных тегов с помощью popover, тогда переключите его. Также добавлено свойство trigger к вариантам popover, установленным на manual.

$(document).ready(function() { 
 

 
    $('.triggerOverlay').popover({ 
 
    html : true, 
 
    content: function() { 
 
     var $this = $(this); 
 
     var cont = $this.data('toggle'); 
 
     return $('#'+cont).html(); 
 
    }, 
 
    trigger: 'manual' 
 
    }); 
 

 

 
    $(document).on('click', function (e) { 
 
    // always hide them all. 
 
    $('.triggerOverlay').popover('hide'); 
 
    // if e.target has a popover toggle it. 
 
    if ($(e.target).hasClass('triggerOverlay')) { 
 
     $(e.target).popover('toggle'); 
 
    } 
 
    }); 
 

 
});

.customoverlay{display:none;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<a href="#" data-toggle="user-profile-overlay" class="triggerOverlay">button</a><br><br><br><br><br> 
 
<div id="user-profile-overlay" class="customoverlay">content goes here</div> 
 
<a href="#" data-toggle="user-profile-overlay1" class="triggerOverlay">button</a><br><br><br><br> 
 
<div id="user-profile-overlay1" class="customoverlay">second content goes here</div> 
 
<a href="#" data-toggle="user-profile-overlay2" class="triggerOverlay">button</a><br><br><br> 
 
<div id="user-profile-overlay2" class="customoverlay">third content goes here</div>