シンプルなスライド式の垂直メニューを作成しようとしています - div コンテナー (sliderContainer) 内のいくつかの div (#sliderOption_ )。2 つの矢印 (上/下) でスライド効果を制御します。上下に80px (#optionMenu_ * height) 移動するには、スライダー内の div が必要です。実際にはsliderContainerの表示領域内にあるdivのcss（つまり、境界半径）を、順序（1番目、2番目、3番目-写真を参照）に従って変更したい。真ん中の項目は、他のことが起こるきっかけとなるものです - #btn? その目的のために、対応するものが表示されるはずです。私は他の投稿をチェックしていますが、私の場合の解決策を得ることができません... Html構造:
<p id="upBtn">Up</p>
<p id="downBtn">Down</p>
<div id="sliderContainer">
<div id="optionMenu_1" class="optionMenu"> Option menu 1 <div id="btn1" class="btn">1</div> </div>
<div id="optionMenu_2" class="optionMenu"> Option menu 2 <div id="btn2" class="btn">2</div> </div>
<div id="optionMenu_3" class="optionMenu"> Option menu 3 <div id="btn3" class="btn">3</div> </div>
<div id="optionMenu_4" class="optionMenu"> Option menu 4 <div id="btn6" class="btn">4</div> </div>
<div id="optionMenu_5" class="optionMenu"> Option menu 5 <div id="btn5" class="btn">5</div> </div>
<div id="optionMenu_6" class="optionMenu"> Option menu 6 <div id="btn6" class="btn">6</div> </div>
<div id="optionMenu_7" class="optionMenu"> Option menu 7 <div id="btn7" class="btn">7</div> </div>
</div>
私は本当に可能な限り単純なことを望んでいます-外部ライブラリはありません（可能であれば）。すべての要素を含む jsFiddle を次に示します。
どんな助けでも感謝します。ありがとう。
ペドロ