簡體   English   中英

Javascript jQuery重置值onclick

[英]Javascript Jquery reset values onclick

我一直在處理此網站標題,使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');  
  }
  });
});

提前致謝!

打開任何一個工具欄時,只需確保已刪除另一個工具欄的“打開”類即可。 請參見下面的代碼。

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM