Question

我有几张带有独特popover的图片。当用户点击其中一个时，我希望隐藏其他人，只显示一个。

这是我到目前为止所做的。我不知道如何在一个人活跃时隐藏其他弹出窗口，这就是我需要帮助的东西。

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

试试这个：当点击一个弹出窗口时，使用jquery将addclass隐藏到所有其他弹出窗口，一旦用户查看完再次显示所有弹出窗口，您需要删除此类。它会看起来像这样。

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

显示一个popover隐藏其他引导程序

2 个答案: