2

私はこのHTMLコードを持っています:

<table class="bag"> 
    <tr>
        <td id='slot0' item-type="" item-id="">
            <a href="#" id="tool1" rel="popover" data-content="cont" data-original-title="ti-ta" data-animation="false">
                <div class="bag-trigger"><tag style="z-index:10" id='tag0' class="hidden"></tag></div>
            </a>
        </td>

        <td id='slot1' item-type="" item-id="">
            <a href="#" id="tool2" rel="popover" data-content="cont" data-original-title="ti-ta">
                <div class="bag-trigger">
                    <tag id='tag1' class="hidden"></tag>
                </div>
            </a>
        </td> 
        <td id='slot2' item-type="" item-id="">
            <a href="#" id="tool3" rel="popover" data-content="cont" data-original-title="ti-ta">
                <div class="bag-trigger"><tag id='tag2' class="hidden"></tag></div>
            </a>
        </td> 
        <td id='slot3' item-type="" item-id="">
            <a href="#" id="tool4" rel="popover" data-content="cont" data-original-title="ti-ta">
                <div class="bag-trigger"><tag id='tag3' class="hidden"></tag></div>
            </a>
        </td>
    </tr>
</table>

これは私のjQueryコードです:

<script>  
$(function () {
    for (var i = 1; i <= 16; i++) {
        $("#tool"+i).popover({animation:'false'});
        $("#tool"+i).popover({placement:'top'});  
        $("#tool"+i).popover({trigger: 'hover'});  
     }; 
});  
</script>

私の問題は、望ましくないときに同時にポップアップを開くことができることです。ポップアップを閉じずに一度に 2 つのポップアップをクリックすると、他のポップアップを閉じるにはどうすればよいですか?

4

4 に答える 4

3

他のポップオーバーを隠す

ポップオーバーはホバー時にトリガーされるため、次のように、マウスオーバーイベントで非表示機能を他のポップオーバーにバインドする必要があります。

1) ID セレクター (^ - で始まる; 'test' キーワードで始まる ID を持つすべての要素):

$("[id^='test']").mouseover(function () {
    $("[id^='test']").not(this).popover('hide');
});

これは、たとえば、testX (X - 1, 2, 3 ...) と headerX (X - 1, 2, 3 ...) のようなポップオーバーのグループがほとんどなく、1 つのポップオーバーのみをアクティブにしたい場合に適しています。特定のグループ。

2) REL セレクターを使用 (REL 属性を持つすべての要素が「ポップオーバー」に等しい):

$("[rel='popover']").mouseover(function () {
    $("[rel='popover']").not(this).popover('hide');
});

ポップオーバーの初期化

for ループを使用して、html 要素のポップオーバーを初期化しないでください。次のようにJQueryセレクターを使用します。

1) IDセレクター

$("[id^='test']").popover(
    {trigger:'hover',animation:'false',placement:'top'}
);

2) RELセレクター

$("[rel='popover']").popover(
    {trigger:'hover',animation:'false',placement:'top'}
);
于 2013-05-08T10:00:42.490 に答える
2

このようにすべてのポップオーバーを一度に設定できます。一度にアクティブになるのは 1 つだけです。

$('[rel*=popover]').popover({trigger:'hover',animation:'false',placement:'top'});
$('[rel*=popover]').click(function () {
     $('[rel*=popover]').not(this).popover('hide');
});
于 2013-05-08T09:30:10.583 に答える
0 
<script>  
$(function () {
    for (var i = 1; i <= 16; i++) {
       $("#tool"+i).popover({animation:'false'});
       $("#tool"+i).popover({placement:'top'});  
       $("#tool"+i).popover({trigger: 'hover'});  
       $("#tool"+i).mouseout(function(){$(this).hide()});
     }; 
});  
</script>
于 2013-05-08T09:26:55.087 に答える
0

もう 1 つの方法は、トリガーを「手動」に設定し、別の onclick/mouseover イベントを処理して、ツールチップの表示/非表示を処理することです。このようにして、クリック イベントをより詳細に制御できます。

$('[rel*=popover]').popover({trigger:'manual',animation:'false',placement:'top'});

$('[rel*=popover]').click(function () {
    $('[rel*=popover]').popover('hide');
    $(this).popover('show');
});

また

$('[rel*=popover]').popover({trigger:'manual',animation:'false',placement:'top'});

$('[rel*=popover]').mouseover(function () {
    $('[rel*=popover]').popover('hide');
    $(this).popover('show');
});

$('[rel*=popover]').mouseout(function () {
    $('[rel*=popover]').popover('hide');
});

それが役に立てば幸い！！

于 2015-03-07T18:55:14.813 に答える