Javascript:change'；显示'；和'；左'+；切换类

单击菜单按钮时，我想做两件事。首先，我想让这些条变成一个十字，这已经用

x.classList.toggle（“change”）完成了

但不起作用的是应该向右滑动并显示的

#navi

div

以下是我尝试的：（不要介意

#主图标

，

#说明

等）

函数侧边栏函数（x）{
x、 切换（“更改”）；
（'#navi'）.style.left=“80px”；
（“#navi”）.style.display=“inline”；
};
$（文档）.ready（函数（）{
$（“#navi”）。单击（函数（）{
美元（“#navi.fa雪佛龙向下”）。toggleClass（“rtoate180”）；
$（“#导航”）。幻灯片切换（500）；
});
})；

#更多条{
位置：固定；
光标：指针；
宽度：35px；
高度：25px；
左：18px；
顶部：20px；
}
.bar1，
.bar2，
.bar3{
位置：相对位置；
宽度：35px；
高度：5px；
边缘顶部：6px；
背景色：#843b62；
过渡：0.4s；
-webkit转换：0.4s；
-o过渡：0.4s；
-moz跃迁：0.4s；
}
.找零{
-webkit变换：旋转（-45度）平移（-9px，6px）；
变换：旋转（-45度）平移（-9px，6px）；
-ms变换：旋转（-45度）平移（-9px，6px）；
}
.找零{
不透明度：0；
}
.找零{
-webkit变换：旋转（45度）平移（-8px，-8px）；
变换：旋转（45度）平移（-8px，-8px）；
-ms变换：旋转（45度）平移（-8px，-8px）；
}
#更多条：悬停。条1，#更多条：悬停。条2，#更多条：悬停。条3{
背景色：#f67e7d
}
/*主要图标*/
#主要图标{
z指数：1；
位置：固定；
顶部：250px；
左：0px；
文本对齐：居中；
}
#主图标>a{
位置：固定；
边缘顶端：40px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#主要图标i{
显示：块；
高度：50px；
宽度：50px；
填充：10px；
颜色：#fff；
背景#f67e7d；
字体大小：20px；
线高：50px；
-webkit过渡：全部。5s轻松；
-moz过渡：全部5秒轻松；
-o型过渡：全部。5秒轻松；
过渡：所有。5s轻松；
}
#主要图标一：悬停{
-网络工具包盒阴影：插入7px 0px 0px 0px#f67e7d；
-moz盒阴影：插入7px 0px 0px 0px#f67e7d；
方框阴影：插入7px 0px 0px 0px#f67e7d；
颜色：#f67e7d；
背景：#fff；
-webkit过渡：全部。5s轻松；
-moz过渡：全部5秒轻松；
-o型过渡：全部。5秒轻松；
过渡：所有。5s轻松；
}
/*------边栏-----*/
#边栏{
宽度：300px；
身高：100%；
左边距：-300px；
顶部：0px；
}
/*------窄边栏-----*/
#侧边栏1{
z指数：10；
位置：固定；
顶部：0px；
左：0；
宽度：70px；
高度：200px；
}
/*博客标题*/
#博客标题{
字体系列：雷威；
字号：8px；
颜色：#843b62；
宽度：70px；
线高：30px；
保证金：0自动；
文本对齐：居中；
单词包装：打断单词；
-webkit转换：所有0.3简化为0.3；
-moz转换：所有0.3秒都轻松0.3秒；
-o-过渡：所有0.3秒缓解0.3秒；
过渡：所有0.3秒缓解0.3秒；
}
#博客名{
利润上限：-30px；
字体系列：雷威；
字号：8px；
颜色：#843b62；
宽度：70px；
线高：30px；
左边距：-70px；
文本对齐：居中；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
过渡：所有0.3秒缓解；
}
#阿凡达：悬停~#博客标题{
-ms变换：平移（-70px）；
-webkit转换：转换（-70px）；
转换：转换（-70px）；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
过渡：所有0.3秒缓解；
}
#阿凡达：悬停~#博客名{
-ms变换：平移（70px）；
-webkit转换：翻译（70px）；
转换：转换（70px）；
-webkit转换：所有0.3简化为0.3；
-moz转换：所有0.3秒都轻松0.3秒；
-o-过渡：所有0.3秒缓解0.3秒；
过渡：所有0.3秒缓解0.3秒；
}
/*化身*/
#化身{
保证金：自动；
边缘顶部：100px；
宽度：50px；
高度：50px；
z指数：10；
}
#阿凡达img{
宽度：100%；
身高：100%；
边界半径：10px；
-webkit过渡：所有0.6秒轻松；
-moz转换：所有0.6秒的易用性；
-ms转换：所有0.6s的易用性；
-o型过渡：所有0.6s的轻松度；
过渡期：所有0.6秒缓解；
}
#阿凡达img：悬停{
-ms变换：旋转（360度）；
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
/*描述*/
#描述{
位置：固定；
左边距：80px；
顶部：20px；
颜色：#000；
背景：#fff；
填充：2x10px 2x10px；
宽度：150px；
字体大小：13px；
线高：18px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
不透明度：0.5；
}
#描述：之后{
内容：''；
位置：绝对位置；
边框样式：实心；
边框宽度：18px 18px 18px 0；
边框颜色：透明#fff；
显示：块；
宽度：0；
z指数：1；
左-18px；
顶部：85px；
}
#头像>图像：悬停+描述{
不透明度：0.75；
左边距：110像素；
}
/*搜索框*/
#搜寻{
边缘顶部：10px；
左边距：20px；
宽度：180px；
高度：30px；
溢出：隐藏；
颜色：#000000；
背景：#fff；
}
/*航行*/
#纳维{
光标：指针；
位置：绝对位置；
顶部：20px；
左：40px；
宽度：170px；
高度：30px；
线高：30px；
左侧填充：10px；
溢出：隐藏；
颜色：#000000；
背景#f67e7d；
字体大小：12px；
文本对齐：左对齐；
显示：无；
-webkit过渡：所有0.5s轻松；
-moz过渡：所有0.5s轻松；
-ms过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
过渡：全部为0.5