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