jqueryでhtmlフォームをスライドさせると定義されたコントロールが動作しない

Question

私は<nav>タグを持つhtmlフォームを持っています。フォームは次のとおりです。

<section class="dropinput"> 
     <form id="add_task_form" class="addTaskForm" action=""> 
     <input type="text" id="add_task_name" class="addTaskInputFirst"> 
     <input type="submit" id="add_task_button" class="addTaskBtn"> 
     <nav> 
      <input type="text" id="add_task_date" class="addTaskInputFirst imptdetail"> 
      <p class="date"></p> 
      <input type="text" id="add_task_location" class="addTaskInputFirst imptdetail"> 
      <p class="location"></p> 
     </nav> 
     </form> 
</section> 

navタグルールの制御は次のとおりです。

• すべてのテキストフィールドが空で、マウスがフォーム外にある場合、<nav> </nav>内のテキストフィールドは上にスライドします。

私はそれを行うために以下の.jsファイルを持っています。

$('#add_task_form').focusout(function(){ 

if((!$('#add_task_name').val()) && (!$('#add_task_date').val()) && (!$('#add_task_date').val())) 
    { 
     $('.dropinput nav').slideUp(300); 
    } 

}); 

私は正しいコードを持っていると思いますが、うまくいきません。最初のフィールドをクリックするとナビエリアが正しく開きますが、他のテキストフィールドに移動した後は、add_task_nameフィールドに何も入力しなければスライドエリアが上がります。

この問題を解決するお手伝いをしてもらえますか？どんな助けもありがとう。

Answer 1

最初のフィールドから他の入力フィールドに移動するときは、フォーカスアウト（フォームから）を本質的に実行しているので、フェードアウトが起こっています。

次のコードは、これはあなたが望むものであるかどうかわからページロードであなたのNAVタグルールを満たしてなく...

$(document).ready(function() { 
    if ($("#add_task_form input:focus").length == 0) { 
     $("nav").slideUp(300); 
    } else { 
     // do what you need to do 
    } 
});