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

});

用focus-jquery扩展div

1 个答案: