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

Question

I'm trying to have an e-mail submission form box appear when visitors click a little envelope icon at the top right of my page, but I can't seem to get ti to work--either it appears in the middle of a bunch of icons or it doesn't appear at all. Ideally I would love for it to show up just underneath the row of icons (see attached image). I'm extremely new to all of this, so thank you in advance for your patience :)

Here's the HTML (the

li is within the and accompanies three other icons):

 <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> 

the css:

  nav.email-form{ display:none; } 

and the js:

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

Answer 1

Well you can position your form container absolutely (or fixed). Something like this:

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

And then you some simple javascript to toggle it:

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

Demo: http://jsfiddle.net/2RCw4/

I would also not recommend you to use methods like .next() , because if you change markup it will stop working.

Answer 2

I agree with dfsq, but instead of using .click() and .show() I would recommend the jQuery function .fadeToggle(). I assume that if you are going to want to show something, you are also going to want to hide it again.

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