[英]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.