在当前点击的 TD 中打开 div答案

【问题标题】：Open div in current clicked TD在当前点击的 TD 中打开 div
【发布时间】：2011-12-29 14:13:52
【问题描述】：

<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。

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

【问题讨论】：

立即查看jsfiddle.net/QyRnH/2

标签： javascript jquery html

【解决方案1】：

试试下面的方法

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

});

要改变left和top，你可以写类似

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

外部点击时隐藏div，请参考Krister Andersson发布的答案

【讨论】：

谢谢，可以操纵这个吗？左侧和顶部？如果我点击外部 DIV，如何隐藏 div？

【解决方案2】：

我不确定“如何在当前点击的 TD 中打开 div #hidden”是什么意思，但要显示和隐藏 #hidden div，你可以这样做：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();
});

【讨论】：

如果我点击 111 那么我想要 TD 111 中的这些 div

【解决方案3】：

给你：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();

});

【讨论】：

如果我点击外部，我想隐藏 div，而不是切换，但谢谢 :)

【解决方案4】：

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

【讨论】：