Javascript jQuery重置值onclick

Question

我一直在处理此网站标题，使div一次单击即可上下移动，因此单击搜索按钮将显示一个搜索栏，单击帐户按钮将显示一个帐户栏。 在Madalin的大力帮助下，我已经实现了这一点（文章“ 使用javascript上下移动DIV ”）。

但是...有没有一种方法可以在单击两个按钮之一（即“搜索”或“帐户”）时重置javascript。 我需要这个，因为现在当您单击一次它就可以了，但是例如当搜索已经被单击并且您单击帐户时，您必须再次在搜索上单击两次以查看操作...请参考jsfiddle：[ https：// jsfiddle达网络/ 27jaodcg] [1]

因此，当您单击帐户时，它会关闭搜索栏，而当您单击搜索栏时，它会关闭帐户栏，这很完美（一次）。

但是，如果在脚本“ thinks”帐户栏仍处于打开状态之前单击了帐户，则在单击“搜索”时它将关闭帐户栏，但是在再次单击帐户时，脚本将首先关闭帐户栏，但不会发生任何事情（但单击搜索按钮已将其关闭）。

我希望这是有道理的 ：）

以下是到目前为止的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');
  }
  });
});