打开当前点击的TD div

Question

<table id="tab"> 
    <tr><td class="click" id="111">111</td> <td id="222" class="click">222</td></tr> 
    <tr><td class="click" id="333">333</td> <td id="444" class="click">444</td></tr> 
</table> 

<div id="hidden"> 
    text 
</div> 

#tab tr td { 
padding: 10px; 
    border: solid 1px red; 
} 

#hidden { 
    background-color:green; 
    width: 40px; 
    height: 40px; 
    display: none; 
} 

$(".click").click(function(){ 
    $("#hidden").show(); 
}) 

如何在当前点击的TD中打开div #hidden？如果我点击外面＃隐藏我想隐藏这个div。

小提琴：http://jsfiddle.net/QyRnH/2/

Answer 1

我不知道你所说的“如何是什么意思在当前点击的TD中打开div #hidden“，但显示并隐藏#hidden格，你可以这样做：http://jsfiddle.net/QyRnH/7/

<table id="tab"> 
    <tr> 
    <td class="click" id="111">1</td> 
    <td class="click" id="222">2</td> 
    </tr> 
    <tr> 
    <td class="click" id="333">3</td> 
    <td class="click" id="444">4</td> 
    </tr> 
</table> 

<div id="hidden">text</div> 

$(".click").click(function(e){ 
    $("#hidden").show(); 
    $("#hidden").appendTo($(this)); 
    e.stopPropagation(); 
}); 
$(document).click(function() { 
    $('#hidden').hide(); 
}); 

Answer 2

在这里你去：http://jsfiddle.net/maniator/QyRnH/6/

HTML：

<table id="tab"> 
    <tr> 
     <td class="click" id="111"> 
     111 
      <div class="hidden"> 
       text 
      </div> 
     </td> 
     <td id="222" class="click"> 
      222 
      <div class="hidden"> 
       text 
      </div> 
     </td> 
    </tr> 
    <tr> 
     <td class="click" id="333"> 
      333 
      <div class="hidden"> 
       text 
      </div> 
     </td> 
     <td id="444" class="click"> 
      444 
      <div class="hidden"> 
       text 
      </div> 
     </td> 
    </tr> 
</table> 

JS：

$(".click").click(function() { 

    $(".hidden").hide(); 
    $(".hidden", this).toggle(); 

}); 

Answer 3

尝试类似下面

$(".click").click(function(){ 
    $("#hidden").show(); 
    $("#hidden").offset($(this).offset()); 

}); 

要更改左，顶部，你可以写类似

$("#hidden").offset({top: $(this).offset().top, left: $(this).offset().left+10}); 

要隐藏在div点击时外面请参考Krister Andersson发布的答案

Answer 4

$(".click").click(function(){ 
    $("#hidden").show(); 
    $(this).append($("#hidden")); 
})