Question

我一直在这个网站标题上工作，div在点击时上下移动，因此点击搜索按钮会弹出一个搜索栏并点击帐户按钮会弹出一个帐户栏。在Madalin的帮助下，我实现了这一目标（文章＆＃34; DIV moving up and down using javascript＆＃34;）。

但是......有没有办法在点击其中一个按钮时重置javascript（所以要么＆＃34;搜索＆＃34;或＆＃34;帐号＆＃34;）。我需要这个，因为现在当你点击一次它工作但是当你已经点击搜索已经点击帐户时你必须再次点击搜索才能看到行动...请参考jsfiddle：[https://jsfiddle.net/27jaodcg][1]

因此，当您点击帐户时，它会关闭搜索栏，当您点击搜索栏时会关闭帐户栏，这样就完美了（一次）。

但是在脚本之前点击了帐户＆＃34;认为＆＃34;帐户栏仍处于打开状态，因此当点击搜索时会关闭帐户栏，但是当再次点击帐户时，由于脚本首先关闭了帐户栏（但已经通过点击搜索按钮关闭了帐户栏），因此没有任何反应。

我希望这是有道理的：）

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

Javascript Jquery重置值onclick

1 个答案: