下拉动画图标

Question

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

http://jsfiddle.net/1fb9nqb1/

$('#toggle').click(function () {
    $('#dropdown').slideToggle();
    $('#opt-slide').toggleClass('open');
});

$('#dropdown > li').click(function () {
    $('#dropdown').slideUp();
    $('#opt-slide').removeClass('open');
});

* {
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
}
header {
    height:200px;
    background:#39F;
    z-index:4;
}
#opt-slide {
    width:300px;
}
#toggle {
    background:#099;
    display:block;
    height:50px;
    color:#FFF;
    line-height:50px;
    z-index:4;
}
#dropdown {
    background:#0C9;
    list-style:none;
    margin-top:0px;
    z-index:2;
    display:none;
}
#dropdown li {
    height:40px;
    line-height:40px;
}
#dropdown li:hover {
    background:#FAFAFA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="opt-slide"> <span id="toggle">OPTIONS</span>

    <ul id="dropdown">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3</li>
        <li>Option 4</li>
        <li>Option 5</li>
    </ul>
</div>

我怎样才能像这样添加动画：

https://dribbble.com/shots/1621359-Open-Close-Icon-Animation 支持菜单的展开/折叠？ 另一件事，有没有办法在没有jQuery的情况下做下拉菜单？

谢谢

Answer 1

如果你检查这个JS Fiddle，你会看到我添加了两个跨度#s1和#s2，带有一个容器div#sign，跨度旋转45deg但彼此相反，当菜单隐藏时，两个spans 以表示箭头形状的方式定位，如果单击切换span，.class1 和.class2 分别添加到#s1 和#s2，这些类具有不同的margin-left 值，使两个跨度形成带有transitionio 的X 形，其中原始margin-left valeus 在每个跨度css 中设置了过渡，以使它们平稳地进出，而不是仅仅在css 中跳跃，你然而，可以使用 jquery .animate() 设置相同的值和缓动来为这些跨度设置动画，但因为它可以用 css 完成，所以我会选择它：

Edit-1： 代码根据评论更改，将 div#sign 更改为 span#sign 并使其成为 span#toggle 的子 JS Fiddle 2

更新代码：

$('#toggle').click(function() {
  $('#dropdown').slideToggle();
  $('#opt-slide').toggleClass('open');
  $('#sign #s1').toggleClass('close1');
  $('#sign #s2').toggleClass('close2');

});

$('#dropdown > li').click(function() {
  $('#dropdown').slideUp();
  $('#opt-slide').removeClass('open');
});

* {
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
}
header {
    height:200px;
    background:#39F;
    z-index:4;
}
#opt-slide {
    width:300px;
    position:relative;
}
#toggle {
    background:#099;
    display:block;
    height:50px;
    color:#FFF;
    line-height:50px;
    z-index:4;
    position:relative;
}
#dropdown {
    background:#0C9;
    list-style:none;
    margin-top:0px;
    z-index:2;
    display:none;
}
#dropdown li {
    height:40px;
    line-height:40px;
}
#dropdown li:hover {
    background:#FAFAFA;
}
#sign{
    width:50px;
    height:25px;
    display:inline-block;
    position:absolute;
    top:25px;
    right:10px;
}
#sign .s{
    width:25px;
    height:4px;
    display:inline-block;
    border-radius:2px;
    background-color:white;
    position:absolute;
}
#sign #s1{
    transform:rotate(45deg);
    z-index:100;
    margin-left:0;
    transition:all 0.5s ease-out;
}
#sign #s2{
    transform:rotate(-45deg);
    z-index:200;
    margin-left:16px;
    transition:all 0.5s ease-in;
}
#sign #s2.close2{
    margin-left:7px;
    transition:all 0.5s ease-out;
}
#sign #s1.close1{
    margin-left:7px;
    transition:all 0.5s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="opt-slide"> <span id="toggle">OPTIONS<span id="sign"><span id="s1" class="s"></span><span id="s2" class="s"></span></span>
  </span>

  <ul id="dropdown">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
    <li>Option 5</li>
  </ul>
</div>