用focus-jquery扩展div

Question

几周后我会重新审视它，因为我以前无法让它工作，希望现在能工作。

请查看此网站 - 请注意右上角的时事通讯注册表单。

http://www.rattletree.com

我现在希望它看起来完全一样，但是当用户在框中单击以输入他们的电子邮件地址时，包含的 div 将在电子邮件字段上方展开（或简单地出现）以包含“名称”和“城市”字段。

我正在大量使用 jquery，所以我可以随意使用它。此表单在标题中，因此任何 id 信息等都不能与 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;
}

感谢您的帮助！

乔尔

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();
  });

});