Question

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

＆＃13;

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

＆＃13;

* {
    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;
}

＆＃13;

<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>

＆＃13;

如何添加动画，就像这样：

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

由于

Answer 1

如果您选中JS Fiddle，我们会看到我添加了两个范围#s1和#s2，其中包含div#sign个容器，如果您点击切换45deg，{{{1} 1}}和spans分别添加到span和.class1，这些类具有不同的.class2值，使得两个跨度形成具有中转的X形状，其中原始#s1 valeus在每个跨度css中设置过渡以使它们平滑地移入和移出而不是仅仅在css中跳跃，但是你可以使用jquery #s2设置相同的值并使用缓动来设置这些跨度的动画，但是它可以用css完成我跟它一起去：

修改-1：代码在评论时发生了变化，将margin-left更改为margin-left并使其成为.animate() JS Fiddle 2的孩子

更新代码：

＆＃13;

div#sign

＆＃13;

span#sign

＆＃13;

span#toggle

＆＃13;

下拉动画图标

1 个答案: