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

});