8

折りたたみ可能な div 内にポップオーバーを含めたい: http://jsfiddle.net/nathan9/qgyS7/。ただし、ポップオーバーは div の範囲に限定されているようです。クリッピングを防ぐ方法はありますか？

<a href="#toggle" data-toggle="collapse" data-target="#toggle" onClick="return false;">Toggle collapse</a>
<div id="toggle" class="collapse" style="background-color: yellow">
    Content of collapsible div. Click for popover: 
    <i class="icon-info-sign" id="info"></i>
</div>

...

<script>
    $('#info').popover({ html: true, placement: 'left', title: 'Popover', content: "<ul><li>The</li><li>popover</li><li>is</li><li>clipped.</li></ul>" });
</script>
4

2 に答える 2

9

タイマーの使用は常に危険なビジネスです。折りたたみ可能なイベントをリッスンし、表示および非表示にするMikeLucidのバリアントを使用しました。

これが実用的なフィドルです

コードは次のとおりです。

$(document).ready(function(){
  $('#toggle')
    .on('shown', function(evnt) {
      $(evnt.target).addClass('visible');  
    })
    .on('hide', function(evnt) {
      $(evnt.target).removeClass('visible');  
    })
  ;   
});

ロード時に折りたたみ可能を表示したい場合は、折りたたみ可能divにクラスを追加して表示することを忘れないでください。

編集

Bootstrap 2.3以降、ツールチップとポップオーバーに新しいcontainerオプションが追加されました。コンテナを「body」に設定すると、ツールチップとポップオーバーはクリップされません。これが実用的なフィドルです。

お役に立てば幸いです。

于 2013-02-03T13:12:47.750 に答える
2

追加する.collapse.in {overflow:visible}とうまくいくようです

http://jsfiddle.net/ZArX7/

編集：上記の回答はクロムでのみ機能しました

これは、クラスの追加を遅らせる jquery の一部です。

     $('#toggle_link').click(function() {
    if($('#toggle').hasClass('in')){
        $('#toggle').removeClass('visible');
    }else{
        setTimeout(function() {
            $('#toggle').addClass('visible');
        }, 1000);
    }
});

このソリューションは機能します

http://jsfiddle.net/fnP7y/

于 2012-11-07T00:36:03.133 に答える