我不是 JavaScript 向导,所以我确定我在这里遗漏了一些明显的东西。我有一个包含多个链接的无序列表 & 当用户将鼠标悬停在 <li>
上时然后他们可以看到链接并单击它以查看 Twitter Bootstrap's pop-over behavior
.
我的问题是
- 它不关闭前一个
pop-over
如果我打开一个新的。 - 如果再次将鼠标悬停在同一个“推文”图片上,它也会再次显示推文链接。
这是 fiddle http://jsfiddle.net/ZnJ6b/17/ ,请看看并尝试帮助我。
js代码看起来像
$("[data-toggle='popover']").popover({
placement: 'right',
html: 'true',
title : '<span class="text-info"><strong>title</strong></span>',
content : '<input id="subproject_id" type="text"/>'
});
$('.add_btn').click(function(e) {
$('.popover-title').append('<button id="popovercloseid" type="button" class="close">×</button>');
$("#subproject_id").focus();//textbox focus
$(this).css("display","inline");
$(this).removeClass( "add_btn" ).addClass( "new_add_btn" );
});
$(document).click(function(e) {
if(e.target.id=="popovercloseid" ) {
$('.new_add_btn').popover('hide');
$('.new_add_btn').css("display","none");
$('.new_add_btn').removeClass( "new_add_btn" ).addClass( "add_btn" );
}
});
http://blog.alysson.net/lang/pt-br/twitter-bootstrap-popover-close-all-before-opening-a-new-one/链接似乎是教程,但我无法将其实现到上面的代码。有什么帮助吗?
最佳答案
您的代码中有一些不必要的行会影响弹出窗口的行为。
我已经评论了一些行并添加了这个声明:
$('.add_btn').not(this).popover('hide');
这样一次只显示一个弹出窗口。
这段代码用一个按钮关闭你的弹出框:
$('html').on('click', '#popovercloseid', function (e) {
$('.add_btn').not(this).popover('hide');
});
关于javascript - Twitter bootstrap popover 在打开一个新的之前关闭所有,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23039080/