打開當前點擊的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")); 
})