下拉栏在第二次单击时返回(在inputbox中)，因为它在动画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下拉"input box”和图像(都在"beau“div中)，一切正常，但当我单击"input box”键入文本时，拖放栏又重新弹出。我知道它为什么这样做，我已经尝试了一些事情来使它工作，但我就是不能得到它。感谢大家的帮助:)

Answer 1

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

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