Javascript 显示一个popover隐藏其他引导

我有几个独特的popover图像。当用户单击其中一个按钮时，我希望隐藏其他按钮，并且只显示其中一个

这就是我到目前为止所做的。我没有ide关于如何隐藏一个处于活动状态的其他弹出窗口，这就是我需要帮助的地方

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

//popover主页
$（“#罗伯特”）.popover({
位置：'顶部'，
html:'真'，
内容：“Text 1
-Robert，kampanjen
”，
触发器：“单击”
});
$（“#reconna”）.popover({
位置：'顶部'，
html:'真'，
内容：“文本2
-Anna，kampanjen
”，
触发器：“单击”
}); 
$（“#基督教”）.popover({
位置：'顶部'，
html:'真'，
内容：“Text 3
-坎帕延基督教堂”，
触发器：“单击”
});
$（'recohanjun'）.popover({
位置：'顶部'，
html:'真'，
内容：“文本4
-Adam，kampanjen
”，
触发器：“单击”
});

不熟悉HAML，但请在单击功能中尝试以下操作：

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

---

尝试以下操作：当单击一个弹出窗口时，使用jquery向所有其他弹出窗口添加隐藏类，用户查看完后，需要删除该类以再次显示所有弹出窗口。看起来是这样的

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

---

或者试试下面的答案。当我现在点击其中一个div时，它不会打开popover。你有没有发现错误或其他什么？我提供的代码是否像您所希望的那样隐藏了其他图像？还有-你说

div

不会打开，但是你在

li

上有ID，这只是一个输入错误吗？活动的css类用于其他内容，没有错误，我刚才单击图像不会发生任何事情。如果您可以提供一个JSFIDLE。。。