在文本框中使用點擊時展開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(); 
}); 

扭捏的偏移量。