Javascript Jquery reset values onclick

Question

私はこのウェブサイトのヘッダーでdivをクリックして上下に動いているので、検索ボタンをクリックすると検索バーが表示され、アカウントボタンをクリックするとアカウントバーが表示されます。 Madalinの大きな助けを借りて私はこれを達成しました（記事 "DIV moving up and down using javascript"）。

しかし、ボタンのいずれかをクリックするとjavascriptをリセットする方法があります（「検索」または「アカウント」）。私はこれが必要なのは、今すぐクリックしたときに動作するが、例えば、検索が既にクリックされているときに、あなたがアクションを見るために再び2回クリックしなければならないためです。アカウントをクリックすると検索バーが閉じられ、検索バーをクリックするとアカウントバーが閉じられます。これは完璧に（一度）動作します。

しかし、スクリプトが "考える"前にアカウントがクリックされても、アカウントバーはまだ開いているので、検索をクリックするとアカウントバーが閉じられますが、アカウントを再びクリックすると、スクリプトはアカウントバーを最初に閉じますボタンをクリック）。

私は、これは理にかなって願っています:)

以下

は、これまでのJavascript jQueryのコードです：事前に

jQuery(document).ready(function($){ 
    $("#account").on('click',function(){ 
    if($(this).hasClass('open')) { 
     $("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false }); 
     $("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false }); 
     $("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false }); 
     $('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false }); 
     $(this).removeClass('open'); 
    } else { 
     $("#topheaderid").animate({ top: '60px' }, { duration: 500, queue: false }); 
     $("#accountbarid").animate({ height: '60px' }, { duration: 500, queue: false }); 
     $("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false }); 
     $('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false }); 
     $(this).addClass('open'); 
    } 
    }); 
    $("#searchid").on('click',function(){ 
    if($(this).hasClass('open')) { 
     $("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false }); 
      $("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false }); 
     $("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false }); 
     $('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false }); 
     $(this).removeClass('open'); 
    } else { 
     $("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false }); 
      $("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false }); 
     $("#searchbarid").animate({ height: '60px' }, { duration: 500, queue: false }); 
     $('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false }); 
     $(this).addClass('open'); 
    } 
    }); 
}); 

ありがとう！

Answer 1

いずれかのツールバーを開くときは、他のツールバーの「オープン」クラスが削除されていることを確認してください。以下のコードを参照してください。

jQuery(document).ready(function($){ 
    $("#account").on('click',function(){ 
    if($(this).hasClass('open')) { 
     $("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false }); 
     $("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false }); 
     $("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false }); 
     $('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false }); 
     $(this).removeClass('open'); 
    } else { 
     $("#topheaderid").animate({ top: '60px' }, { duration: 500, queue: false }); 
     $("#accountbarid").animate({ height: '60px' }, { duration: 500, queue: false }); 
     $("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false }); 
     $('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false }); 
     $(this).addClass('open'); 
     $("#searchid").removeClass('open'); 
    } 
    }); 
    $("#searchid").on('click',function(){ 
    if($(this).hasClass('open')) { 
     $("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false }); 
      $("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false }); 
     $("#searchbarid").animate({ height: '0' }, { duration: 500, queue: false }); 
     $('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false }); 
     $(this).removeClass('open'); 
    } else { 
     $("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false }); 
      $("#accountbarid").animate({ height: '0' }, { duration: 500, queue: false }); 
     $("#searchbarid").animate({ height: '60px' }, { duration: 500, queue: false }); 
     $('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false }); 
     $(this).addClass('open'); 
     $("#account").removeClass('open'); 
    } 
    }); 
});