如何防止打开多个引导程序弹出窗口

Question

点击链接后，弹出窗口打开。单击其他链接时，我希望先前打开的弹出窗口关闭。 JSFIDDLE

HTML

<div id="ln1">
                            <span id="m-marital-status" data-single="I am" data-multiple= "We are">I am</span>
                            <div class="section-input">
                                <div class="popover-markup" id="marital-status"><a href="#" class="trigger">single</a> with 
                                    <div class="head hide"></div>
                                    <div class="content hide">
                                        <ul class="marital-status">
                                          <li data-sataus="We are">married</li>
                                          <li data-sataus="I am">single</li>
                                        </ul>
                                    </div>
                                    <!-- <span>no Kids</span>. -->
                                </div>
                            </div>
                            <div class="section-input">
                                <div class="popover-markup" id="my-kids"><a href="#" class="trigger">no kids</a>
                                    <div class="head hide"></div>
                                        <div class="content hide">
                                            <div class="form-group span2 pull-left">
                                                <label for="kid19" class="pull-left">UNDER 19</label>
                                                <input type="number" id="kid19" class="form-control age span2" placeholder="1"/>
                                            </div>
                                            <div class="form-group span2 pull-left">
                                                <label for="kid26">AGED 19-26</label>
                                                <input type="number" id="kid26" class="form-control age span2" placeholder="1"/>
                                            </div>
                                            <button type="button" id="kids"class="btn btn-default btn-block span4">ok</button>
                                        </div>
                                </div>
                            </div>.
                        </div>

JS

$('body').on("click", ".popover-content li, .popover-content button", function (e) {
    var target = e.target.tagName.toLowerCase(),
        self = $(this),
        text = self.text();
    switch (target) {
        case 'li':
            if (text === "married") {
                $status.text($status.data("multiple"));
            } else {
                $status.text($status.data("single"));
            }
            $('#spouse-info').toggleClass('hide', (text !== "married"));
            $('#marital-status .trigger').text(text).popover("hide");
            break;
        case 'button':
            var age = self.parent().find('input').val() || $('#my-age .trigger').text() ;
            $('#my-age .trigger').text(age).popover("hide");
            break;
        default:
            // do nothing
    }
    e.preventDefault();
});

Answer 1

$('.popover-markup a').click(function(){
    $('.popover-markup a').not(this).popover('hide'); 
});

小提琴

http://jsfiddle.net/R28sQ/15/