单击图标图像显示电子邮件注册表单

Question

当访问者单击页面右上角的信封图标时，我试图显示一个电子邮件提交表单框，但是我似乎无法正常工作-要么出现在电子邮件的中间一堆图标，或者根本不显示。 理想情况下，我希望它显示在图标行的下方（请参见附件图像）。 我对这一切都非常陌生，所以在此先感谢您的耐心配合:)

这是HTML（

li位于内，并带有其他三个图标）：

 <li> <div class="email-form"><img src="<?php echo $site_url;?>img/nav/emailicon.png?v=2" alt="E-mail Sign Up" width="23" height="23" id="email-icon" style="display: inline;"/><form class="email-form" action="subscribelink" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" style="display: none;"><fieldset><input type="text" name="EMAIL" value="YOUR EMAIL ADDRESS" /> <input type="submit" value="Submit" /> </div> <div class="email-response" style="display: none;">Thank You</p></fieldset></form> </li> </div> </a> 

CSS：

  nav.email-form{ display:none; } 

和js：

 $(function(){ $('.email-icon').on('click', function(e){ e.preventDefault(); $(this).next('.email-form').show(); }); }); 

Answer 1

好吧，您可以完全（或固定）放置表单容器。 像这样：

.email-form form {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
}

然后您可以使用一些简单的JavaScript进行切换：

$('#email-icon').click(function() {
    $('#mc-embedded-subscribe-form').show();
});

演示： http ： //jsfiddle.net/2RCw4/

我也不建议您使用.next()类的方法，因为如果更改标记，它将停止工作。

Answer 2

我同意dfsq，但建议使用jQuery函数.fadeToggle（），而不是使用.click（）和.show（）。 我假设如果您要显示某些东西，那么您也将要再次隐藏它。

$('#email-icon').click(function() {
   $('#mc-embedded-subscribe-form').fadeToggle();
});