function choicebutton(coverbutton,cover,up,down,butt){
var flag=true;
$(coverbutton).on('click',function(){
if(flag && coverbutton=='.scene-button'){
$(cover).css('display','block');
$(up).css('display','inline-block');
$(down).css('display','none');
$(butt).css('background-color','#f4fbfb');
alert('.scene-button');
flag=false;
}else{
$(cover).css('display','none');
$(up).css('display','none');
$(down).css('display','block');
$(butt).css('background-color','white');
flag=true;
};
if(flag && coverbutton=='.entity-button'){
$(cover).css('display','block');
$(up).css('display','inline-block');
$(down).css('display','none');
$(butt).css('background-color','#f4fbfb');
alert('.entity-button');
flag=false;
}else{
$(cover).css('display','none');
$(up).css('display','none');
$(down).css('display','block');
$(butt).css('background-color','white');
flag=true;
};
if(flag && coverbutton=='.admin-button'){
$(cover).css('display','block');
$(up).css('display','inline-block');
$(down).css('display','none');
$(butt).css('background-color','#f4fbfb');
alert('.admin-button');
flag=false;
}else{
$(cover).css('display','none');
$(up).css('display','none');
$(down).css('display','block');
$(butt).css('background-color','white');
flag=true;
}
});
};
设置样式的代码结构类似,完全可以拿出来重构。
设计函数,函数作用是改变样式,参数为四个参数。
每次调用只需一行。
把你要改变的样式写入css里面,改为两个class
函数里面的话 直接 $().toggleClass("xxx") 就可以了
//左侧选项栏的动效
function listdown(cover,up,down,butt){
$(cover).css('display','block');
$(up).css('display','inline-block');
$(down).css('display','none');
$(butt).css('background-color','#f4fbfb');
};
function listup(cover,up,down,butt){
$(cover).css('display','none');
$(up).css('display','none');
$(down).css('display','block');
$(butt).css('background-color','white');
};
function scene(){
var flag=true;
$('.scene-button').on('click',function(){
if(flag){
listdown('.cover2','.sceneup','.scenedown','.scene');
$('.admin').animate({top: '-66px'}, 500, 'swing');
$('.entity').animate({top: '0px'}, 500, 'swing');
$('.entity').css('border-top','1px solid #dbdbdb');
flag=false;
}else{
listup('.cover2','.sceneup','.scenedown','.scene');
$('.admin').animate({top: '-132px'}, 500, 'swing');
$('.entity').animate({top: '-66px'}, 500, 'swing');
$('.entity').css('border-top','white');
flag=true;
};
});
};
scene();
function entity(){
var flag=true;
$('.entity-button').on('click',function(){
if(flag){
listdown('.cover4','.entityup','.entitydown','.entity');
$('.entity-button').css('background-color','#f4fbfb');
$('.admin').animate({top: '-66px'}, 500, 'swing');
flag=false;
}else{
listup('.cover4','.entityup','.entitydown','.entity');
$('.entity-button').css('background-color','white');
$('.admin').animate({top: '-132px'}, 500, 'swing');
flag=true;
};
});
};
entity();
function admin(){
var flag=true;
$('.admin-button').on('click',function(){
if(flag){
listdown('.cover6','.arrowup','.arrowdown','.admin');
$('.admin-ul').css('display','inline-block');
$('.admin-button').css('background-color','#f4fbfb');
flag=false;
}else{
listup('.cover6','.arrowup','.arrowdown','.admin');
$('.admin-button').css('background-color','white');
$('.admin-ul').css('display','none');
flag=true;
};
});
};
admin();