用焦點-jquery展開div

Question

幾周後我正在重新訪問，因爲我之前無法讓它工作，並且希望現在。

請看這個網站 - 注意右上角的簡報註冊表格。

http://www.rattletree.com

我想它看起來完全現在這樣，但是當在輸入框中輸入用戶點擊進入他們的電子郵件地址，包含div將擴大（或簡單地出現）以上的電子郵件領域還包括「名稱」和「城市」字段。

我在視野中大量使用jquery，所以這是我的處置。這種形式是在頭部，所以任何ID信息等不能withing body標籤...

這是我到目前爲止有：

<div class="outeremailcontainer"> 
    <div id="emailcontainer"> 
    <?php include('verify.php'); ?> 
     <form action="index_success.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" class="info" id="emailFrom" 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> 
     </form> 
    <div class="clearing"> 
    </div> 
     </div> 

CSS：

p.emailbox{ 
text-align:center; 
margin:0; 
} 

p.emailbox:first-letter { 
font-size: 120%; 
font-weight: bold; 
} 

.outeremailcontainer { 
height:60px; 
width: 275px; 
background-image:url(/images/feather_email2.jpg); 
/*background-color:#fff;*/ 
text-align:center; 
/* margin:-50px 281px 0 auto ; */ 
float:right; 
position:relative; 
z-index:1; 
} 


form.email{ 
position:relative; 
} 


#emailcontainer { 
margin:0; 
padding: 0 auto; 
z-index:1000; 
display:block; 
position:relative; 
} 

感謝您的幫助！

Joel

Answer 1

嗨！我爲你發佈a demo。基本上額外的輸入是在表單內，但隱藏。當您將注意力集中在電子郵件輸入中時，隱藏的元素就會顯示出來。我使用.slideDown()函數向他們展示了它們，但您可以用任何類型的動畫替換它。我還添加了一個疊加層，它出現在輸入框下方，如果您願意，可以調整CSS使其完全透明，因爲疊加層的真正目的是在點擊時隱藏額外的輸入。

HTML（我剝出用於演示的PHP）

<div class="outeremailcontainer"> 
<div id="emailcontainer"> 
    <form action="index_success.php" method="post" id="sendEmail" class="email"> 
    <h3 class="register2">Newsletter Signup:</h3> 
    <ul class="forms email"> 
    <li class="name"><label for="yourName">Name: </label> 
    <input type="text" name="yourName" class="info" id="yourName" value=" " /><br> 
    </li> 

    <li class="city"><label for="yourCity">City: </label> 
    <input type="text" name="yourCity" class="info" id="yourCity" value=" " /><br> 
    </li> 

    <li class="email"><label for="emailFrom">Email: </label> 
    <input type="text" name="emailFrom" class="info" id="emailFrom" value=" " /> 
    </li> 

    <li class="buttons email"> 
    <button type="submit" id="submit">Send</button> 
    <input type="hidden" name="submitted" id="submitted" value="true" /> 
    </li> 

    </ul> 
    </form> 
</div> 

腳本

$(document).ready(function(){ 

$('#emailFrom') 
    .focus(function(){ 
    if ($('#overlay').length) { return; } // don't keep adding overlays if one exists 
    $('#sendEmail') 
    .css({ backgroundColor: '#ddd' }) 
    .find('.name, .city').slideDown(300, function(){ $(this).show(); }); // added so this works in IE 
    $('.outeremailcontainer').css({ position: 'relative', bottom: 0, left: 0, zIndex : 1001 }); 
    $('<div id="overlay"></div>').appendTo('body'); 
    }); 

$('#overlay').live('click', function(){ 
    $('#sendEmail') 
    .css({ backgroundColor : 'transparent' }) 
    .find('.name, .city').slideUp(300); 
    $('.outeremailcontainer').css({ position : 'static' }); 
    $('#overlay').remove(); 
    }); 

});