Javascript jQuery重置值onclick [英] Javascript Jquery reset values onclick

问题描述

我一直在处理此网站标题，使div一次单击即可上下移动，因此单击搜索按钮将显示一个搜索栏，单击帐户按钮将显示一个帐户栏.在Madalin的一些大力帮助下，我已经实现了这一目标(文章"使用javascript ).

I've been working on this website header with divs moving up and down on a click, so clicking on the search button brings up a searchbar and clicking on the account button brings up an accountbar. With some great help from Madalin I've achieved this (article "DIV moving up and down using javascript").

但是...有没有一种方法可以通过单击任意一个按钮(因此选择搜索"或帐户")来重置javascript.我需要它，因为现在当您单击一次它就可以了，但是例如当搜索已经被单击并且您单击帐户时，您必须再次在搜索上单击两次以查看操作...请参阅jsfiddle:[

However... Is there a way to reset the javascript on clicking of either one of the buttons (so either "search" or "account"). I need this because now when you click once it works but when for example search has been clicked already and you click account you have to click twice again on search to see action... Please refer to the jsfiddle: [https://jsfiddle.net/27jaodcg][1]

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

So when you click account it closes the searchbar and when you click the search bar it closes the accountbar, this works perfect (once).

但是，如果在脚本"thinks"帐户栏仍处于打开状态之前单击了帐户，则在单击搜索"时它将关闭帐户栏，但是在再次单击帐户时，脚本将首先关闭帐户栏(但已通过搜索按钮关闭了该脚本)时，没有任何反应点击).

But when account has been clicked before the script "thinks" accountbar is still open so when clicking search it closes the accountbar but when clicking on account again nothing happens as the script closes accountbar first (but its closed already by the search button click).

我希望这是有道理的:)

I hope this makes sense :)

以下是到目前为止的Javascript jQuery代码:

Below is the Javascript Jquery code so far:

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');  
  }
  });
});

提前谢谢！

推荐答案

打开任何一个工具栏时，只需确保已删除另一个工具栏的打开"类即可.参见下面的代码.

When opening either of the toolbars, just ensure the "open" class of the other toolbar is removed. See code below.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！