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

$('.temp').focus(function(){                              // on focus...
   $(this).closest('div').find('.desc').css({             // Get desc
       top: $(this).offset().top + $(this).outerHeight()  // set Y pos
   }).show();                                             // and show it.
}).blur(function(){                                       // On blur...
   $(".desc").hide();                                     // hide all.
});

.desc {
    background-color: green;
    display: none;
    position:absolute;                                    /* add this */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
    <div>
        <input type="text" class="temp" />
        <div class="info">Test info </div>
        <div class="desc">
            focus <br />
            two <br />
            three
        </div>
    </div>
    <div>
        <input type="text" class="temp" />
        <div class="info">Test info </div>
        <div class="desc">
            test1
            two <br />
            three
        </div>
    </div>
    <div>
        <input type="text" class="temp" />
        <div class="info">Test info 444</div>
        <div class="desc">
            test2
            two <br />
            three
        </div>
    </div>
</div>

Answer 2

您可以获取当前聚焦的输入框的位置，然后相应地放置您的.desc元素。不要忘记将.desc元素设为$('.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'); })

[global::System.Configuration.SpecialSettingAttribute(global::System.Configuration.SpecialSetting.ConnectionString)]
        [global::System.Configuration.DefaultSettingValueAttribute("Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\ConnectionSet" +
            "tings.mdf;Integrated Security=True; User Instance=True")]

[global::System.Configuration.DefaultSettingValueAttribute("Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\ConnectionsDa" +
            "tabase.mdf;Integrated Security=True; User Instance=True")]

更新了小提琴http://jsfiddle.net/ykw67nuv/3/

显示和隐藏所有

2 个答案: