Javascript 下拉式动画图标

假设我有一个像这样的下拉菜单：

$（“#切换”）。单击（函数（）{
$（“#下拉列表”）.slideToggle（）；
$（'opt slide'）。toggleClass（'open'）；
});
$（'#下拉列表>li'）。单击（函数（）{
$（“#下拉列表”）.slideUp（）；
$（'opt slide'）。removeClass（'open'）；
});
*{
保证金：0；
填充：0；
字体系列：Arial、Helvetica、无衬线字体；
}
标题{
高度：200px；
背景：#39F；
z指数：4；
}
#选择幻灯片{
宽度：300px；
}
#拨动{
背景:#099；
显示：块；
高度：50px；
颜色：#FFF；
线高：50px；
z指数：4；
}
#下拉列表{
背景：#0C9；
列表样式：无；
边际上限：0px；
z指数：2；
显示：无；
}
#下拉列表李{
高度：40px；
线高：40px；
}
#下拉列表李：悬停{
背景：#FAFAFA；
}

选择权

选择1
选择2
选择3
选择4
备选案文5

如果您选中此项，您将看到我添加了两个span
#s1
和
#s2
，带有一个容器
div#符号
，span旋转
45度
，但彼此相对，当菜单隐藏时，两个
span
以表示箭头形状的方式定位，如果单击切换按钮
span
，
.class1
和
.class2
分别添加到
#s1
和
#s2
，则这些类具有不同的
左边距
值，使两个跨距形成具有过渡的X形，如果原始
左边距
valeus设置在每个跨度css中，并带有过渡，以使它们平滑地移入移出，而不是在css中全部跳出，那么您可以使用jquery
.animate（）
设置这些跨度的动画，也可以轻松设置相同的值，但由于可以使用css来完成，因此我会使用它：

Edit-1:根据注释更改代码，将div#sign更改为span#sign并使其成为span#toggle

更新代码：
$（“#切换”）。单击（函数（）{
$（“#下拉列表”）.slideToggle（）；
$（'opt slide'）。toggleClass（'open'）；
$（“#符号#s1”）.toggleClass（'close1'）；
$（“#符号#s2”）.toggleClass（'close2'）；
});
$（'#下拉列表>li'）。单击（函数（）{
$（“#下拉列表”）.slideUp（）；
$（'opt slide'）。removeClass（'open'）；
});
*{
保证金：0；
填充：0；
字体系列：Arial、Helvetica、无衬线字体；
}
标题{
高度：200px；
背景：#39F；
z指数：4；
}
#选择幻灯片{
宽度：300px；
位置：相对位置；
}
#拨动{
背景:#099；
显示：块；
高度：50px；
颜色：#FFF；
线高：50px；
z指数：4；
位置：相对位置；
}
#下拉列表{
背景：#0C9；
列表样式：无；
边际上限：0px；
z指数：2；
显示：无；
}
#下拉列表李{
高度：40px；
线高：40px；
}
#下拉列表李：悬停{
背景：#FAFAFA；
}
#标志{
宽度：50px；
高度：25px；
显示：内联块；
位置：绝对位置；
顶部：25px；
右：10px；
}
#签名{
宽度：25px；
高度：4px；
显示：内联块；
边界半径：2px；
背景色：白色；
位置：绝对位置；
}
#符号#s1{
变换：旋转（45度）；
z指数：100；
左边距：0；
过渡：所有0.5s缓解；
}
#符号#s2{
变换：旋转（-45度）；
z指数：200；
左边距：16像素；
过渡：所有0.5s的轻松过渡；
}
#标志#s2.2{
左边距：7px；
过渡：所有0.5s缓解；
}
#标志#s1.1{
左边距：7px；
过渡：所有0.5s缓解；
}

选择权

选择1
选择2
选择3
选择4
备选案文5

嗯，我不知道这也需要，给我点时间：）