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

我現在有一個JavaScript˚F通過backbone.js結了用戶之後加selected類點擊綠色空間之一。

我想要做的是增加一個有過的<li>，我一下就紅了選擇滑動畫。我對CSS動畫相當陌生，解決這個問題的最好方法是什麼？

Answer 1

你可以使用jQuery的滑塊 - 「多縱」和風格它按您上面看： 請看看這個鏈接： http://jqueryui.com/slider/#multiple-vertical