css：如何根据选择在窗口小部件上获取元素以打开/关闭

Question

我有一个选择小部件，如下所示：

在Dust：

中呈现

<ul class="widget">
  {@keyvalue:XXX}
    <li class="widget-item">
    </li>
  {/keyvalue}
</ul>

这样的风格如下：

.widget{
    border:  1px;
    margin-top: 5px;
    border-radius: 0.3em;
    background-color: green;
    padding: 0;        
    display: inline-block;        
    list-style: none;

    .widget-item {
        display: inline-block;
        border-left: 2px solid black;
        padding: 0.7em 1.5em;
        position: relative;
        cursor: pointer;


        &:first-child{
            border-left: 0;
        }

        &.selected{
            z-index: 10;
            border: 0.5em solid transparent;                
            border-radius: 0.3em;
            margin: -0.5em;
            background-color: red;                
            &:after{ // pointer
                top: 100%;
                border: solid transparent;
                content: " ";
                height: 0;
                width: 0;
                position: absolute;
                pointer-events: none;
                border-top-color: red;
                border-width: 18px;
                left: 50%;
                margin-left: -18px;
            }
        }
    }
}

我目前通过backbone.js设置了一个javascript函数，在用户点击其中一个绿色空格后添加selected类。

我想要做的是添加一个动画，其中红色选择器滑过我点击的<li>。我对CSS动画很陌生，最好的方法是什么？

Answer 1

您可以使用jQuery滑块 - “多个垂直”并按照上面的样式设置样式： 请看一下这个链接： http://jqueryui.com/slider/#multiple-vertical