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。

小提琴：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发布的答案

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

我不确定你的意思是“如何在当前点击的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();
});

Answer 4

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

在当前点击的TD中打开div

4 个答案: