次のコードでは、クリックイベントがボディに明示的に追加されているため、ボタンの外側をクリックしてもbody上で言うように、IDのtip1のdivはフェード効果で閉じる必要があります。 ここで問題となるのは、div自体をクリックしてもdivが閉じるということです。この上の任意のアイデアが役立つだろう ..jqueryクリックイベント
$(document).ready(function(){
$('.button').getit({speed: 150, delay: 300});
});
$.fn.getit = function(options){
var defaults = {
speed: 200,
delay: 300
};
var options = $.extend(defaults, options);
$(this).each(function(){
var $this = $(this);
var tip = $('.tip');
this.title = "";
var offset = $(this).offset();
var tLeft = offset.left;
var tTop = offset.top;
var tWidth = $this.width();
var tHeight = $this.height();
$this.click(
function() {
if($('.tip').hasClass('.active101')) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
}
else {
setTip(tTop, tLeft);
$('body').bind('click',function(e) {
var parentElement = "button1";
var parentElement2 = "tip1"
if(e.target.id != parentElement) {
$('.tip').fadeOut("slow");
$('.tip').removeClass('.active101').addClass('.inactive101');
}
});
$('.tip').removeClass('.inactive101').addClass('.active101');
setTimer();
}
},
function() {
if($('.tip').hasClass('.inactive101')) {
stopTimer();
tip.hide();
}
}
);
setTimer = function() {
$this.showTipTimer = setInterval("showTip()", defaults.delay);
}
stopTimer = function() {
clearInterval($this.showTipTimer);
}
setTip = function(top, left){
var topOffset = tip.height();
var xTip = (left-440)+"px";
var yTip = (top-topOffset+100)+"px";
tip.css({'top' : yTip, 'left' : xTip});
}
showTip = function(){
stopTimer();
tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
}
});
};
<div class="main">
<a href="#" class="button" id="button1">
Click Me!
</a>
<div class="tip" id="tip1">Hello again</div>
</div>
あなたはdiv要素にjQueryのアンバインド機能(http://api.jquery.com/unbind/)を使用することができます。しかし、私はまた、単に別の条件を追加することにより、これに対する別の解決策を見つけました。クリックイベントの詳細を名前付き関数に移動し、divでunbindを呼び出すだけです。 – idbentley