JS - フォーカス/ Toggling Div後にカーソルを再度選択

Question

2つのフォームのランディングページがあり、1つのフォームのみが表示されます。最初のフォームは年齢確認フォームです。条件が満たされたら、jQuery .toggle()を使用して次のフォームに切り替えます。ページのロードで、良いUXのために、私はこのコード行で最初のフォームフィールドにカーソルを置くために.focus()を使用しています：$("input[name='month']").focus();

// Focus cursor on first input field 
 

 
$("input[name='month']").focus(); 
 

 
var age = 19; 
 
// After calculating age based on user input, toggle the elements 
 

 
if (age >= 18) { 
 
    $('#age-verification').toggle(); 
 
    $('#subscribe').toggle(); 
 
} else { 
 
    $('#age-verification').html('<h2>Sorry, you must be at least 18 years old.</h2>'); 
 
}

<div id="age-verification"> 
 
    <h2>Must be 18, please verify age</h2> 
 
    <input type="number" name="month" /> 
 
    <input type="number" name="day" /> 
 
    <input type="number" name="year" /> 
 
    <button id="age-gate-submit">Submit</button> 
 
</div> 
 

 
<form id="subscribe" action="#" method="post"> 
 
    <input type="text" name="email" /> 
 
    <input type="text" name="zip" /> 
 
    <button id ="subscribe" type="submit">Submit</button> 
 
</form> 
 

 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

どのように私は.select()、focus()のいずれかを使用することができますまたは.toggle()イベントの後、<input type="text" name="email" />の2番目のフォームの最初のフィールドにカーソルを置く方法はありますか？私は.toggle()の後に直接.focus()イベントを配置しようとしましたが、論理的だが成功していないようです。

$('#subscribe').hide(); 

はデモの作業：あなたが最初の購読フォーム非表示にする必要が

Answer 1

あなたの応答のためのhttp://jsbin.com/kihepujewi/edit?html,js,output