javascript - 在当前点击的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？如果我点击 #hidden 外部，我想隐藏这个 div。

fiddle :http://jsfiddle.net/QyRnH/2/

Answer 1

尝试如下所示

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

});

要更改左侧和顶部，您可以编写类似的内容

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

要在外部单击时隐藏 div，请引用 Krister Andersson 发布的答案