Javascript Jquery重置值onclick
我一直在处理这个网站标题,div在点击时上下移动,所以点击搜索按钮会弹出一个搜索栏,点击帐户按钮会弹出一个帐户栏。在Madalin的帮助下,我完成了这篇文章 然而。。。是否有一种方法可以在单击其中一个按钮时重置javascript,以便搜索或帐户。我需要这个,因为现在当你点击一次它的工作,但当例如搜索已被点击,你点击帐户,你必须再次点击搜索两次,以查看行动。。。请参阅JSFIDLE:[ 因此,当您单击account时,它会关闭搜索栏,当您单击搜索栏时,它会关闭accountbar,这一次效果非常好 但是,如果在脚本认为accountbar仍处于打开状态之前单击account,则当单击search时,它会关闭accountbar,但当再次单击account时,不会发生任何事情,因为脚本首先关闭accountbar,但通过单击search按钮,它已关闭 我希望这是有意义的: 以下是迄今为止的Javascript Jquery代码:Javascript Jquery重置值onclick,javascript,jquery,css,Javascript,Jquery,Css,我一直在处理这个网站标题,div在点击时上下移动,所以点击搜索按钮会弹出一个搜索栏,点击帐户按钮会弹出一个帐户栏。在Madalin的帮助下,我完成了这篇文章 然而。。。是否有一种方法可以在单击其中一个按钮时重置javascript,以便搜索或帐户。我需要这个,因为现在当你点击一次它的工作,但当例如搜索已被点击,你点击帐户,你必须再次点击搜索两次,以查看行动。。。请参阅JSFIDLE:[ 因此,当您单击account时,它会关闭搜索栏,当您单击搜索栏时,它会关闭accountbar,这一次效果非常
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');
}
});
});
提前感谢!打开任一工具栏时,只需确保另一个工具栏的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');
}
});
});