Question

Click me to see schematic

我正在尝试构建一个简单的滑动垂直菜单 - div容器（sliderContainer）中的几个div（#sliderOption_ ）。两个箭头（向上/向下）将控制滑动效果。我需要滑块内的div来垂直向上或向下移动80px（#optionMenu _ * height）。我希望divs的css（即边界半径）实际上在sliderContainer的可见区域内，根据它们的顺序（第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。

任何帮助表示赞赏。感谢名单。

佩德罗

Answer 1

我已更新您的示例，请检查here。

我只需添加一个包含optionMenu和一些jQuery魔法的div。

解释：

<div id="sliderContainer">
    <div class="sliderContainerInside">//add just wrapper to your .optionMenu divs
    ......
    ......
</div>//end div #sliderContainerInside

在css中添加以下内容：

.sliderContainerInside {
    position:absolute;
    top:10px;
}
#sliderContainer{
      ......
      ......
      position:relative;
}

在JS中：

$("#upBtn").on('click', function () {
    // slide all optionMenu_* up by 80px
    var maxUp = ($('div.optionMenu').length - 3) * 90;//now get the max px that our .sliderContainerInside can have as top(css) value. Notice that (3) represent the number of divs that 'll be visible to the user and (90) is the optionMenu height plus the value of top padding(10)
    if (-maxUp < parseInt($('.sliderContainerInside').css('top')) - 10) {
        $('.sliderContainerInside').css('top', parseInt($('.sliderContainerInside').css('top')) - 90 + 'px');
    }
    //console.info($('.sliderContainerInside').css('top') - 80);
});

垂直幻灯片式菜单

1 个答案: