显示一个弹出框并隐藏其他弹出框 [英] Show one popover and hide other popovers

问题描述

我有几个按钮，每个按钮我都需要一个弹出框.
我想要这样:
当我的用户单击其中一个时，我希望隐藏其他人.所以只显示一个弹出框
请检查并帮助我更正此示例:

var mycontent='<div class="btn-group"><button class="btn">左</button><button class="btn">Middle</button><button class="btn">右</button>

'

$('.btn').popover({html:对，内容:我的内容，触发器:'手动'}).点击(功能(e){$(this).popover('toggle');e.stopPropagation();});$('html').click(function(e) {$('.btn').popover('隐藏');});

我的 html:

<li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a><li><a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a>

jsfiddle 示例

添加类似下面的代码以某种方式解决了我的问题:

$('.btn').click(function(e) {$('.btn').popover('隐藏');});

但是在每个按钮上点击两次就会出错

解决方案

我以某种方式创建了一个示例来满足我的需要.我使用了这个代码:

$('.btn').popover();$('.btn').on('click', function (e) {$('.btn').not(this).popover('hide');});

在此处查看演示

并更正了之前的演示我希望它能帮助别人

i have several buttons and i need a popover for each.
i want it like this:
when my user click on one of them, i want others to be hidden. so only one popover is shown
check and help me correcting this example plz:

var mycontent='<div class="btn-group"> <button class="btn">Left</button> <button class="btn">Middle</button> <button class="btn">Right</button> </div>'

$('.btn').popover({
    html: true,
    content:mycontent,
    trigger: 'manual'
}).click(function(e) {
    $(this).popover('toggle');
    e.stopPropagation();
});

$('html').click(function(e) {
     $('.btn').popover('hide');
});

my html:

<ul>
    <li>
        <a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a>
    </li>
    <li>
       <a href="#" class="btn" data-toggle="popover" data-placement="bottom" title="" >Popover</a> 
    </li>
</ul>

jsfiddle example

adding something like the code bellow solved my problem somehow:

$('.btn').click(function(e) {
     $('.btn').popover('hide');
});

but by clicking twice on each button it goes wrong

解决方案

somehow i created one example for my need. i used this code:

$('.btn').popover();

$('.btn').on('click', function (e) {
    $('.btn').not(this).popover('hide');
});

check the demo here

and corrected the previous demo i hope it will help someone else

这篇关于显示一个弹出框并隐藏其他弹出框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！