下拉栏在第二次单击（在输入框中）时恢复，因为它位于动画 div 内 - jquery

Question

目前我有这个

            <div id="beau">

                <div>
                <input type="text" id="lun" name="lun" size="24" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'User Name':this.value;" value="User Name"             
                style="position:absolute; background-color:transparent; border-style:none; margin-top:53px; margin-left:35px;" />
                </div>

                <img src="_images/Rollovers/drop bar export.png" alt="extras" width="877" height="160" border="0" />

            </div> 


        <script type='text/javascript'>

    $("#beau").toggle(function(){
        $(this).stop().animate({marginTop: 738}, "fast");
    }, function() {
        $(this).stop().animate({marginTop: 680}, "fast");
    });

        </script>

问题，问题是，我将单击“beau”div 下拉“输入框”和图像（都在“beau”div 内）并且一切正常，但是当我单击“输入框”输入文本，下拉栏再次返回。我知道它为什么这样做，并且我尝试了一些方法来让它工作，但我就是无法得到它。感谢你们所有的帮助:)

Answer 1

一种选择是为输入添加一个处理程序，以停止传播到 div：

    $('#lun').click(function(e){
       e.stopPropagation(); 
    });