Javascript Jquery 重置值 onclick

Question

我一直在处理这个网站的标题，点击一下 div 就会上下移动，所以点击搜索按钮会弹出一个搜索栏，点击帐户按钮会弹出一个帐户栏。在 Madalin 的大力帮助下，我实现了这一目标(文章“DIV moving up and down using javascript”)。

但是...有没有一种方法可以在单击任一按钮(因此“搜索”或“帐户”)时重置 javascript。我需要这个，因为现在当你点击一次它工作但是当例如搜索已经被点击并且你点击帐户你必须再次点击搜索两次才能看到行动......请引用jsfiddle:[https://jsfiddle.net/27jaodcg][1]

因此，当您单击帐户时，它会关闭搜索栏，当您单击搜索栏时，它会关闭帐户栏，这非常有效(一次)。

但是当在脚本“认为”帐户栏仍然打开之前单击帐户时，因此当单击搜索时它会关闭帐户栏但是当再次单击帐户时没有任何反应，因为脚本首先关闭帐户栏(但它已经通过搜索按钮关闭点击)。

我希望这是有道理的:)

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