單擊圖標圖像顯示電子郵件注冊表單

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