次のブートストラップコードは、「スティッキー」なポップオーバーを提供します（ユーザーがポップオーバー内のコンテンツを操作できるようにします）。問題は、ポップオーバーを開くときに、他のポップオーバーを閉じる（非表示にする）必要があることです。これをどのように実装できるか考えていますか？
$("[rel=popover]").popover({placement:'bottom', trigger:'manual'}).hover(function(){
$(this).popover('show');
e.preventDefault();
});
ここに非常に単純な解決策があります（私の解決策ではありませんが、美しく機能します）：
$('.link-popover').click(function(){
$('.link-popover').not(this).popover('hide'); //all but this
});
ブートストラップのドキュメントによると：フォーカストリガーを使用して、ユーザーが次にクリックしたときにポップオーバーを閉じます。
<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data- trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
私はこれについて遊んでいますが、これをうまく再生するために手動の表示/非表示をトリガーすることに関して他のいくつかの問題があります。ホバーは実際にmouseinありmouseout、いくつかの追加のチェックを追加しない限り、私が行ったばかりの問題に遭遇します！
これが私の実際の解決策であり、私が何をしたかを説明しようと思います。
$(function () {
var overPopup = false;
$('[rel=popover]').popover({
trigger: 'manual',
placement: 'bottom'
// replacing hover with mouseover and mouseout
}).mouseover(function (e) {
// when hovering over an element which has a popover, hide
// them all except the current one being hovered upon
$('[rel=popover]').not('#' + $(this).attr('id')).popover('hide');
var $popover = $(this);
$popover.popover('show');
// set a flag when you move from button to popover
// dirty but only way I could think of to prevent
// closing the popover when you are navigate across
// the white space between the two
$popover.data('popover').tip().mouseenter(function () {
overPopup = true;
}).mouseleave(function () {
overPopup = false;
$popover.popover('hide');
});
}).mouseout(function (e) {
// on mouse out of button, close the related popover
// in 200 milliseconds if you're not hovering over the popover
var $popover = $(this);
setTimeout(function () {
if (!overPopup) {
$popover.popover('hide');
}
}, 200);
});
});
これは、次のhtmlで完全に機能しました。
<a href="#" id="example1" class="btn large primary" rel="popover" data-content="Example 1!!!" data-original-title="Example 1 title">Button 1</a>
<a href="#" id="example2" class="btn large primary" rel="popover" data-content="Example 2!!!" data-original-title="Example 2 title">Button 2</a>
<a href="#" id="example3" class="btn large primary" rel="popover" data-content="Example 3!!!" data-original-title="Example 3 title">Button 3</a>
それがあなたを整理することを願っています:)
Bootstrap 3のイベントコールバックを使用すると、次のことができます。
$(document).on('show.bs.popover', function() {
$('.popover').not(this).popover('hide');
});
とコーヒースクリプトで
$(document).on 'show.bs.popover', ->
$('.popover').not(this).popover('hide')
他のすべてのポップオーバーを閉じるためのシンプルなソリューション。これは、クリック/ホバーなどのポップアップが表示されるすべてのイベントに追加できます。次のコードでポップオーバーペーストを表示する直前：
$('.popover').not(this).hide(); //Hides all other popovers
これにより、現在のポップオーバーを除くページ上のすべてのポップオーバーが削除されます
$('li').popover({
title: 'My title',
content: 'My content'
})
.on('show.bs.popover', function() {
if (window._bsPopover) {
$(window._bsPopover).popover('hide')
}
window._bsPopover= this;
})
.on('hide.bs.popover', function() {
window._bsPopover= null; // see Peter Jacoby's comment
});
私は自分のコンテンツに関数を使用したので、（coffeescriptで）：
provideContentForPopover = (element) ->
$('.some-selector').not(element).popover 'hide'
"some content to be returned"
$('.some-selector').popover
content: -> provideContentForPopover @
コンテンツに関数を使用しましたが、正常に動作しています。
$(function () {
$('[data-toggle="popover"]').click(function(){
$(this).popover('toggle');
$('[data-toggle="popover"]').not(this).popover('hide'); //all but this
});
})
$('.allThePopovers').click(function () {
if ($(this).hasClass('popoverIsOpen')) {
$(this).removeClass('popoverIsOpen');
} else {
$('.popoverIsOpen').popover('hide');
$('.allThePopovers').removeClass('popoverIsOpen');
$(this).addClass('popoverIsOpen');
});
ニーズに合わせて、クリックをホバーまたはマウス入力に置き換えるだけです。
これは、一度に1つのポップオーバーのみを開き、クリックで開いたり閉じたりする場合に正常に機能します（カーソル位置は関係ありません）。
$('[data-toggle="popover"]').popover({ html: true }).bind("click", function(){
if(!$(this).parent().children("a").first().is(":hover"))
$( '[data-toggle="popover"]').popover("hide");
else
$( '[data-toggle="popover"]').not($(this).parent().children("a").first()).popover("hide");
return false;
});
すべてのポップオーバーには、次のような個別の親がいることが重要です。
<ul> <li> <popover> </li> <li> <popover> </li> </ul>
HTML：
<li>
<a id="quickmenu-i-305" data-toggle="popover" data-placement="bottom" data-title="Title" data-content='<h2>Plesk Login</h2>' href="Plesk Login">Ihr Kundenbereich</a>
</li>
クリックされたポップオーバーではないポップオーバーを非表示にするだけで、同様のことを達成できました。よくわかりませんが、うまくいくようです。これは、ポップオーバーがクリック時に表示され、存続するためのものです。別のポップオーバーがクリックされると非表示になります。
<script>
$(function () {
$('[rel=popover]').popover({
}).click(function (e) {
$('[rel=popover]').not('#friend_' + $(this).attr('id')).popover('hide');
});
});
</script>
仕事をするためのより簡単な方法：
$('[rel=popover]').popover({
trigger: 'manual',
placement: 'bottom'
}).click(function(e) {
$('[rel=popover]').not('#' + $(this).attr('id')).popover('hide');
var $popover = $(this);
$popover.popover('toggle');
});
ポップオーバーが一意のIDを持っていることを確認してください;]ポップオーバーはデフォルトと同じように動作し、一度に1つのポップオーバーだけが動作します。
動的ポップオーバーにはいくつかの問題があることがわかったので、静的および動的ポップオーバーの2つの解決策を次に示します。
最初の解決策はポップオーバーオプションを使用することですtriger:'focus'
が、このオプションは一部のAndroidデバイスでは機能しません
そして2番目のもの：
$('body').popover({
html: true,
//this is for static and dynamic popovers
selector: '[data-toggle="popover"]',
trigger: 'click',
content: function () {
//i am using predefined content for popovers. replace with your code or remove at all
return $($(this).data('templateselector') + ' .content').html();
},
title: function () {
return $($(this).data('templateselector') + ' .title').html();
},
container: 'body'
}).on('show.bs.popover', function (e) {
// i've found that showed popovers has aria-describedby
// and $('[data-toggle="popover"]).not(this) not working for dynamic popovers so i came with this:
$('[data-toggle="popover"][aria-describedby]').popover('hide');
var trigger = $(e.target);
// this is for adding custom class for popover container
// just remove it if you dont need
trigger.data('bs.popover').tip().addClass($(trigger).data('class'));
});
このメソッドを使用して、ポップオーバーにカーソルを合わせるか、他の要素をクリックしてポップオーバーを開くときに、他のすべてのポップオーバーを非表示にします
1 2 3 4
$(document).ready(function(){
$('.btnPopover').mouseover(function(){
$(this).popover({
html: true,
trigger: 'manual'
}).popover('show');
$('.btnPopover').not(this).popover('hide');
});
});
必ずbootstrap.jsとbootstrap.cssをページに追加してください。お役に立てれば。
乾杯！！スラジクマール
<a>互換性のためにアンカータグを使用する必要があります。
私のフィドル： https ：//jsfiddle.net/oneflame/pnb8Ltj3/
ブートストラップリンク-http : //getbootstrap.com/javascript/#dismiss-on-next-click
<div id="FragmentText1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, est laborum.
</div>
$(document).ready(function(){
$('a.LexicalEntry').popover({
html : true,
content: function() {
return getLexicalDefinition($(this).text());
} ,
trigger: 'focus',
placement: 'auto',
html: true,
container: 'body'
});
});
// *** Injects HTML into raw text.
// *** Splits the content string using a whitespace regular expression.
$('#FragmentText1').each(function() {
// var words = $.trim( $(this).text() ).split(/\s+/g);
var $this = $(this);
$this.html(
$this.text().trim().replace(/\b(\w+)\b/g,
"<a tabindex='0' class='LexicalEntry'' role='button' title='Definition: $1'>$1</a>"
));
});