0

私はJavaScriptの初心者です。検索を使用して問題の解決策を見つけましたが、探しているものが見つかりませんでした。

私はこの jquery.balloon.jsを使用しています。これは、ツールチップのデフォルトのブラウザーレンダリングをカスタマイズされたものに変換します (背景、境界線などの CSS を追加して)。

これは JavaScript コードです。

$(document).ready(function(){
 $('a').balloon({ 
  position: "bottom",
  tipSize: "0"
 });
});

titleすべてが正常に機能します。属性が含まれているリンクにマウスを合わせると、ツールチップがカスタマイズされて表示されます。マウスをホバーすると、ツールチップが非表示になります。

問題は、タッチ スクリーン デバイスでブラウジングするときに発生します。

ホバリング用のマウスがないので、リンクを 1 回タップするとバルーン ツールチップが表示されます (リンクはアクティブにならず、リンクは 2 回タップした場合にのみアクティブになります)。ただし、ツールチップは非表示になりません。体のどこかをタップしましたが、ツールチップが画面に残ります。

htmlJavaScript で要素の外側 (または内body) をクリック/タップして要素を非表示にする方法を知って$('html').click(function() { //code });いますが、ここでの問題は、ツールチップが要素ではなく属性であるということです...

体のどこかをタップしてツールチップだけを非表示にする方法は?

jquery.balloon.jsサイト(こちら) でこの動作を任意のタッチ スクリーン デバイスでテストして、ツールチップをタップしてアクティブにすると非表示にならないことを確認できます。

4

2 に答える 2

0

唯一の答えをありがとう、しかし私はそれを理解しました。

class次のコードでを作成しました。

$.balloon.defaults.classname = ".balloon";
$.balloon.defaults.css = null;

このように.balloonして、ツールチップを自分でカスタマイズできるクラスを作成しました。このコードを使用して、.balloon(新しくカスタマイズされた jQuery ツールチップを非表示にします) を非表示にしてツールチップを非表示にしました。

$(document).ready( function(){
    $('body').click( function(event){
        event.stopPropagation();
        $('.balloon').hide();
    });
});
于 2014-03-24T10:33:25.987 に答える
-1

hideBalloon 関数を呼び出すことができます。

于 2014-03-23T21:02:20.420 に答える