在文本框中使用点击时展开div吗？

Question

我想要div展开显示内容，当用户在文本框中单击鼠标输入文本。我从未在任何地方见过。我知道如何让事情扩大到点击量，但是有人能够指引我寻找什么？

基本上，我有一个电子邮件注册框，我只想显示电子邮件地址的输入字段，但如果用户实际上决定访问电子邮件列表，该div将扩展为也询问他们的姓名和邮编。

谢谢！

我有jQuery的已经设置了电子邮件的形式了，所以我想扩大，如果可能的：

编辑：这是我到目前为止有：

<div class="outeremailcontainer"> 
    <div id="emailcontainer"> 
    <?php include('verify.php'); ?> 
     <form action="emailform.php" method="post" id="sendEmail" class="email"> 
     <h3 class="register2">Newsletter Signup:</h3> 
     <ul class="forms email"> 
      <li class="email"><label for="emailFrom">Email: </label><input type="text" name="emailFrom" id="emailFrom name" value="<?= $_POST['emailFrom']; ?>" /><?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>'; ?></li> 
      <li class="buttons email"><button type="submit" id="submit">Send</button><input type="hidden" name="submitted" id="submitted" value="true" /></li> 
     </ul> 
       <div id="details"> 
         Testing 
       </div> 
     </form> 
    <div class="clearing"> 
     </div> 
     </div> 

<script language="javascript" type="text/javascript"> 
    $("#name").focus(function() { 
     $("#details").fadeIn(); 
    }); 

    $("#name").focus(function() { 
     $("#details").stop().fadeIn(); 
    }).blur(function() { 
     $("#details").stop().fadeOut(); 
    }); 

</script> 

Answer 1

您可以使用焦点而不是点击文本框。

$("#txtBoxID").focus(function(){ 
    $("#yourdivid").show("slow"); 
}); 

如果你想有一个了slideDown效果，那么你可以使用了slideDown

$("#yourdivid").slideDown("slow"); 

Answer 2

可以使用focus()事件这一点。如果你想为几个元素使用这些元素，并且需要其他元素的ID，可以使用类作为标记。您也可以添加一个blur()事件。假设标记：

<input type="text" id="name" class="info"> 
<div id="name_info" class="details">...</div> 

与CSS：

div.details { display: none; } 

做到这一点：

$(".info").focus(function() { 
    $(this.id + "_info").stop().fadeIn(); 
}).blur(function() { 
    $(this.id + "_info").stop().fadeOut(); 
}); 

的stop()调用是有用停在DIV当前运行的动画，是个好习惯由于不同的事件而运行多个动画时进入。

所以添加此功能对任何输入元素：

• 给它任何你想要的ID;
• 给它一类“信息”;
• 创建一个<div>，输入ID的ID在末尾带“_info”;和
• 给那<div>一类“细节”。

现在您可能还想将它放在输入元素旁边。如果是这样，更改CSS：

div.details { display: none; position: absolute; } 

和Javascript：作为必要

$(".info").focus(function() { 
    var offset = $(this).offset(); 
    var height = $(this).outerHeight(); 
    $(this.id + "_info").attr({ 
    top: offset.top + height + 5, 
    left: offset.left 
    }).stop().fadeIn(); 
}).blur(function() { 
    $(this.id + "_info").stop().fadeOut(); 
}); 

扭捏的偏移量。