javascript - 显示一个弹出窗口 隐藏其他弹出窗口

Question

我有几张带有独特弹出窗口的图像。当用户单击其中之一时，我希望隐藏其他内容并只显示一个。

这就是我到目前为止所做的。我不知道如何在其他弹出窗口处于事件状态时隐藏其他弹出窗口，这就是我需要帮助的。

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