jQueryの複数のtogglefade

Question

私はそれがうまく動作しますが、別のリンクをクリックした場合、または私はポップをクローズアップしたいのボックスに

$(document).ready(function() { 
 
    $('.item-link').click(function(e){ 
 
    e.preventDefault(); 
 
    var id = $(this).attr('id'); 
 
    $('#pop-up-' + id).fadeToggle(); 
 
    }); 
 
});

.pop-up{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="1" class="item-link"> 
 
Link 1 
 
</a> 
 
<a href="#" id="2" class="item-link"> 
 
Link 2 
 
</a> 
 
<a href="#" id="3" class="item-link"> 
 
Link 3 
 
</a> 
 
<a href="#" id="4" class="item-link"> 
 
Link 4 
 
</a> 
 

 
<div class="pop-up" id="pop-up-1"> 
 
Content 1 
 
</div> 
 
<div class="pop-up" id="pop-up-2"> 
 
Content 2 
 
</div> 
 
<div class="pop-up" id="pop-up-3"> 
 
Content 3 
 
</div> 
 
<div class="pop-up" id="pop-up-4"> 
 
Content 4 
 
</div>

をポップアップ作成するには、次のコードを使用していますページの他の場所をクリックします。私はjqueryの

Answer 1

ユーザーがページの任意の場所をクリックするとポップアップを閉じることができるようにするには、クリックイベントをリンク元のターゲットよりも高いレベルでキャプチャする必要があります。 documentまたはwindow。こうすることで、ドキュメント内のどこにでも発生するクリックに反応することができます。あなたが実際にどこにもナビゲートしていないときに

---

また、<a>要素を使用しないでください。ちょうどどの要素にもclickイベントハンドラを与えることができるので、あなたのコンテンツに最適な要素を使用してください。追加の利点は、spanというネイティブのクリック動作がないため、と同じように、クリックするネイティブ動作をキャンセルする必要はありません（e.preventDefault()）。aと同様です。

最後に、ベストプラクティスとして、数字で始まる値をidに指定しないでください。 MDNから

：

注：、ASCII文字、数字、 '_' 以外の文字を使用して ' - ' と '' は、HTML 4で許可されていない互換性の問題を引き起こす可能性があります。 HTML 5ではこの制限が解除されていますが、IDは と互換性のある文字で始まる必要があります。

インライン下のコメントを参照してください：あなたはすべてのポップアップを閉じて、必要な1表示することができます

$(document).ready(function() { 
 

 
    // Catch all clicks, no matter where they originated 
 
    $(document).on("click", function(e){ 
 
    
 
    $(".pop-up").hide("slow"); // Hide all the pop ups 
 
    
 
    // Show just the one that was requested. The event target (e.target here) 
 
    // represents the actual object that the event originated from. 
 
    $("#pop-up-" + e.target.id).show("slow"); 
 
    
 
    }); 
 

 
});

/* Make the span elements look/feel like links: */ 
 
.item-link { 
 
    cursor:pointer; 
 
    text-decoration:underline; 
 
    color:blue; 
 
} 
 

 
.pop-up{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span id="a" class="item-link">Link 1</span> | 
 
<span id="b" class="item-link">Link 2</span> | 
 
<span id="c" class="item-link">Link 3</span> | 
 
<span id="d" class="item-link">Link 4</span> 
 

 
<div class="pop-up" id="pop-up-a">Content 1</div> 
 
<div class="pop-up" id="pop-up-b">Content 2</div> 
 
<div class="pop-up" id="pop-up-c">Content 3</div> 
 
<div class="pop-up" id="pop-up-d">Content 4</div>

Answer 2

であなたのfadeToggle()上$('.pop-up').not('#pop-up-' + id).hide()を追加することができますし、まだフェードアウトしながら、現在の1が再び

$(document).ready(function() { 
 
    $('.item-link').click(function(e){ 
 
    e.preventDefault(); 
 
    e.stopImmediatePropagation(); 
 
    var id = $(this).attr('id'); 
 
    $('.pop-up').not('#pop-up-' + id).hide(); 
 
    $('#pop-up-' + id).fadeToggle(); 
 
    }); 
 

 
$(document).click(function(e){ 
 
    if(!$(e.target).is('.pop-up')) { 
 
     if($('.pop-up').is(':visible')) { 
 
      $('.pop-up').fadeOut(); 
 
     } 
 
    } 
 
}) 
 
});

.pop-up{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="1" class="item-link"> 
 
Link 1 
 
</a> 
 
<a href="#" id="2" class="item-link"> 
 
Link 2 
 
</a> 
 
<a href="#" id="3" class="item-link"> 
 
Link 3 
 
</a> 
 
<a href="#" id="4" class="item-link"> 
 
Link 4 
 
</a> 
 

 
<div class="pop-up" id="pop-up-1"> 
 
Content 1 
 
</div> 
 
<div class="pop-up" id="pop-up-2"> 
 
Content 2 
 
</div> 
 
<div class="pop-up" id="pop-up-3"> 
 
Content 3 
 
</div> 
 
<div class="pop-up" id="pop-up-4"> 
 
Content 4 
 
</div>

クリックされた場合には、新しいものを開く前に他人を閉じますその偉大ではありませんよ

Answer 3

 
 
    function fn_click(obj){ 
 
     $(obj).click(function(e){ 
 
     e.preventDefault(); 
 
     var id = $(this).attr('id'); 
 
     $('#pop-up-' + id).fadeToggle(); 
 
     }); 
 
    } 
 

 
    function fn_blur(obj){ 
 
     $('.item-link').on('blur',function(e){ 
 
      $('.item-link').hide(); 
 
     
 
     }); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
\t \t <a href="#" id="1" onClick="fn_click(this);" onBlur="fn_blur(this);" class="item-link"> 
 
\t \t Link 1 
 
\t \t </a> 
 
\t \t <a href="#" id="2" onClick="fn_click(this);" onBlur="fn_blur(this);" class="item-link"> 
 
\t \t Link 2 
 
\t \t </a> 
 
\t \t <a href="#" id="3" onClick="fn_click(this);" onBlur="fn_blur(this);" class="item-link"> 
 
\t \t Link 3 
 
\t \t </a> 
 
\t \t <a href="#" id="4" onClick="fn_click(this);" onBlur="fn_blur(this);" class="item-link"> 
 
\t \t Link 4 
 
\t \t </a> 
 

 
\t \t <div class="pop-up" id="pop-up-1"> 
 
\t \t Content 1 
 
\t \t </div> 
 
\t \t <div class="pop-up" id="pop-up-2"> 
 
\t \t Content 2 
 
\t \t </div> 
 
\t \t <div class="pop-up" id="pop-up-3"> 
 
\t \t Content 3 
 
\t \t </div> 
 
\t \t <div class="pop-up" id="pop-up-4"> 
 
\t \t Content 4 
 
\t \t </div>

Answer 4

-

を

<script> 
    $('.item-link').click(function(e){ 
     e.preventDefault(); 
     var id = $(this).attr('id'); 

     // Hide every pop up 
     $(".pop-up").each(function()){ $(this).css({'opacity' : 0}); }; 

     $('#pop-up-' + id).fadeToggle(); 
    }); 
</script>