我可以完成什么引导弹出窗口做了几个功能，而不是一个完整的插件

Question

我研究了Bootstrap弹出窗口功能的几个替代方案，但没有找到任何有效的解决方案。当我想做的只是通过点击图像元素打开一个小的"语音气泡"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 I attempt:

$(".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";                        
        }

        }
    });
});