한 popover 보여 다른 사람 bootstrap

Question

나는 독특한 popover와 여러 이미지가 있습니다. 사용자가 그 중 하나를 클릭하면, 다른 사람들이 숨기고 오직 하나만 보여지기를 원합니다.

나는 이것을 지금까지 해왔다. 나는 활발히 활동할 때 다른 popovers를 숨기는 방법에 대한 아이디어가 없습니다. 내가 도움이 필요한 것입니다.

HTML/HAML :

%ul 
    %li 
    = image_tag 'robert-reco.jpg', class: "active ", id: "recorobert" 
    %li 
    = image_tag 'anan-reco.jpg', id: "recoanna" 
    %li 
    = image_tag 'christian-reco.jpg', id: "recochristian" 
    %li 
    = image_tag 'hanjun-reco.jpg', id: "recohanjun" 

jQuery 코드 :

//popover homepage 
    $('#recorobert').popover({ 
     placement : 'top', 
     html : 'true', 
     content : '<p>Text 1</p><p class="small">- Robert, kampanjen <a href="#">Movember är här</a></p>', 
     trigger : 'click' 
    }); 
    $('#recoanna').popover({ 
     placement : 'top', 
     html : 'true', 
     content : '<p>Text 2</p><p class="small">- Anna, kampanjen <a href="#">Varför apor aldrig bär rosa klänning</a></p>', 
     trigger : 'click' 
    }); 
    $('#recochristian').popover({ 
     placement : 'top', 
     html : 'true', 
     content : '<p>Text 3</p><p class="small">- Christian, kampanjen <a href="#">Varför apor aldrig bär rosa klänning</a></p>', 
     trigger : 'click' 
    }); 
    $('#recohanjun').popover({ 
     placement : 'top', 
     html : 'true', 
     content : '<p>Text 4</p><p class="small">- Adam, kampanjen <a href="#">Varför apor aldrig bär rosa klänning</a></p>', 
     trigger : 'click' 
    }); 

Answer 1

HAML에 익숙하지만 클릭 기능이 뭔가를하려고하지 :

$.each('li:not('.active')', function() { 
    $(this).addClass('hide'); 
}); 

Answer 2

이 시도 : 하나의 popover를 클릭하면 jquery를 사용하여 addclass를 숨긴다. 모든 popovers를 다시 표시하려면 사용자가보기를 마친 후에이 클래스를 제거해야합니다. 이런 식으로 보일 겁니다.

$(".allpopovers").addClass("hide"); 
$(this).removeClass("hide");