javascript - ブートストラップ ポップオーバーが Chrome で機能しない

Question

http://www.rightoption.co/

ページの右側に "Our Client" があります. サムネイルをクリックするとポップオーバー(Firefox) が開きます. しかし, Google chrome では動作しません. 助けてください.

編集：ウェブサイトはホスティングされなくなりました

Answer 1

これは、ポップオーバーのデフォルトのトリガーがフォーカスであるためです。Firefoxでは、何かをクリックするとフォーカスが得られるように見えますが、この場合はChromeには当てはまらないようです。

次の2つのいずれかを試すことができます。

タグのトリガーを手動で「手動」に設定してみてください。したがって、この属性を追加しますdata-trigger = "manual"

また

ドキュメントのオンロードでは、次の代わりに次のことを行います。

$('#element, #element1').popover('toggle').popover('hide');

代わりに次の行を使用してください。

$('#element, #element1')
   .popover()
   .click(function(e) { 
       e.preventDefault(); 
       $(this).focus(); 
   });

Answer 2

これは私のために働いた！

var el = $('[data-toggle="popover"]');
el
    .on('shown.bs.popover', function(){
        $(document).on('click.popover', function() {
            el.popover('hide');
            $(document).off('click.popover');
        });                            
    })
    .popover();

更新:上記には、ポップオーバーが表示されているときに別のポップオーバー要素をクリックすると、開いているポップオーバーは閉じますが、新しいポップオーバーは開かないという問題がありました。以下は、開いているポップオーバーを閉じて、ワンクリックで新しいポップオーバーを開きます。

var el = $('[data-toggle="popover"]');
el
    .on('click', function(e){
        var el = $(this);
        setTimeout(function(){
            el.popover('show');
        }, 200); // Must occur after document click event below.
    })
    .on('shown.bs.popover', function(){
        $(document).on('click.popover', function() {
            el.popover('hide'); // Hides all 
        });
    })
    .on('hide.bs.popover', function(){
        $(document).off('click.popover');
    });