jQuery：上課點擊：切換div和別的地方點擊：隱藏div

Question

我有3 <a>，它們都具有類.info-btn,data="1"參數（從1到3）。

如果你點擊一個<a>與.info-btn類應該得到data=*放慢參數在VAR x，應$('.div-info-'+x).fadeToggle("fast");創造與類.div-info-*可見DIV（* = 1,2或3;每個班級都存在）

我還想要什麼：如果點擊是在<a class=".info-btn"上的其他地方，它應該隱藏可見的div。

我創造的，哪些是可用..

$(".info-btn").click(function(e){ 
     var x = $(this).attr('data'); 
     $('.div-info-'+x).fadeToggle("fast"); 
    });` 

，但僅適用於類點擊切換，而不是隱藏在點擊其他地方。

我的代碼是什麼我嘗試了其他的事情..

$(document.body).click(function(e){ 

      if ((".info-btn").click()) 
      { 
       var x = $(this).attr('data'); 
       $('.div-info-'+x).fadeToggle("fast"); 
      } 
      else (!(".info-btn").click()) 
      { 
       var x = $(this).attr('data'); 
       $('.div-info-'+x).fadeToggle("fast"); 
      } 

     }); 

我希望你們有人可以幫助我，對不起我的英文不好傢伙..

Answer 1

您可以使用.data()存儲哪些元素被點擊。稍後再點擊文件，檢查目標是不是div也不是它的父母（可選），隱藏它。

HTML

<a class="info-btn" data="1" href="#">INFO</a> 

<div class="div-info-1">Sortierung der Kategorien wird automatisch drei mal täglich ausgeführt. Sortierung Ende Juni 2013 anpassen!</div> 

的JavaScript

$(".info-btn").click(function (e) { 
    var x = $(this).attr('data'); 
    $('.div-info-' + x).show(); 
    $(".info-btn").data('clickedDivId', '.div-info-' + x); 
    return false; 
}); 

$(document).on('click', function (e) { 
    console.log('document clicked'); 
    var target = e.target; 
    var clickedDiv = $(".info-btn").data('clickedDivId'); 
    if (!$(target).is(clickedDiv) && !$(target).parents().is(clickedDiv)) { 
     $(clickedDiv).hide(); 
    } 
}); 

Working Demo