javascript - 显示和隐藏全部

Question

<div id="box">
    <div>
        <input type="text" class="temp" />
        <div class="list">
            focus <br />
            two <br />
            three
        </div>
        <div class="info">Test info </div>
    <div>
        <input type="text" class="temp" />
        <div class="list">
            test1
            two <br />
            three
        </div>
        <div class="info">Test info </div>
    </div>
    <div>
        <input type="text" class="temp" />
        <div class="list">
            test2
            two <br />
            three
        </div>
        <div class="info">Test info 444</div>
    </div>
</div>

jsfiddle:http://jsfiddle.net/ykw67nuv/1/

在此示例中，如何在所有 div(position:absolute)上显示 div.desc？我希望 div.desc 紧邻输入下方(通过 div.info 等)。

第二个问题:如果我点击 input.temp 外部，如何隐藏 div.desc？

Answer 1

您可以获取当前聚焦的输入框的位置，然后相应地定位您的 .desc 元素。不要忘记获取 .desc 元素 position:absolute

$('.temp').focus(function(){
   $(this).parent('div').find('.desc').toggleClass('show').css({
    left:$(this).position().left,
       top:$(this).position().top+$(this).height()+10,
       width:($(this).width()+10)+'px'
   });
}).blur(function(){
    $(this).parent('div').find('.desc').toggleClass('show');
})

更新了 fiddle http://jsfiddle.net/ykw67nuv/3/