javascript - 在单击图标图像时显示电子邮件注册表单

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() 这样的方法，因为如果您更改标记，它将停止工作。