我可以用几个功能而不是完整的插件来完成 Bootstrap Popover 的功能吗？

Question

我研究了 Bootstrap Popover 功能的几种替代方案，但没有找到有效的解决方案。当我想要做的只是通过单击图像元素打开一个小的“语音气泡”div 时，Popover 插件似乎有点矫枉过正。如果用户单击触发此事件的元素、语音气泡本身或页面上的任何位置，语音气泡应该会再次关闭。我想在一页上有几个。如果用户打开一个气泡并单击另一个触发元素，则当前打开的气泡将关闭，新的气泡将打开。在可切换方面，它几乎就像来自 jQueryUI 的手风琴。

我有一些代码，但我还没有完全掌握 jQuery。我需要switch 声明还是.each()？

HTML：

<div class="testimonial">
    <p class="leftCol">
        Click the link:
        <br />
        <a href="#" class="trigger" id="trig1">I'm the first link</a>
    </p>
    <div class="voiceContainer" id="vc1">
        <div class="voiceContent">
            You clicked the first link.
        </div>
        <div class="arrow arrow-bottom"></div>
    </div>
</div>
<div class="testimonial">
    <p class="leftCol">
        Click the link:
        <br />
        <a href="#" class="trigger" id="trig2">I'm the second link</a>
    </p>
    <div class="voiceContainer" id="vc2">
        <div class="voiceContent">
            You clicked the second link.
        </div>
        <div class="arrow arrow-bottom"></div>
    </div>
</div>

我尝试过的jQuery：

$(".testimonial").each(function(){
    $(this).find(".voiceContainer").hide();
});

$(".testimonial").each(function(){
    $(this).find(".trigger").click(function() {
        // I'm stuck here. I don't think that .voiceContainer is a sibling of .trigger
    });
});

我是在正确的轨道上，还是完全偏离了基地？任何帮助表示赞赏。

Answer 1

http://jsfiddle.net/6W253/3/ 不确定这是否是您想要的。有点草率。

CSS

.hide { display:none; }

Javascript：

$(".voiceContainer").each(function () {
    $(this).addClass("hide");

});$(".testimonial").each(function () {
    $(this).find(".trigger").click(function () {

        var voiceContainers = document.getElementsByClassName("voiceContainer");
        var triggers = document.getElementsByClassName("trigger");    
        for ( i = 0; i < triggers.length; i++)
        {   
            voiceContainers[i].className =  voiceContainers[i].className + " " + "hide";

        if (this == triggers[i]) 
        {               
            voiceContainers[i].className = "voiceContainer";                        
        }


        }
    });
});