Question

我正在尝试构建一个菜单，当您单击它时将活动的li保持在相同的位置并向相邻的li添加一个类（因此它们可以被设置样式）这个想法是，允许我创建一个“3D轮”效果 - 即点击元素垂直位于ul的中心。

 <div id="container">
    <ul>
        <li>1</li>
        <li class="adj">2</li>
        <li class="active">3</li>
        <li class="adj">4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

它的样式非常简单，但是在没有插件的情况下重新排序更加困难。

http://jsfiddle.net/vDb3L/2/

我最接近的是使用技术Box9通过将活动元素与第三个元素交换来演示here。然而，这会使相邻元素静止，看起来不太好，

$.fn.exchangePositionWith = function(selector) {
var other = $(selector);
this.after(other.clone());
other.after(this).remove();
};

$(this).addClass('active').exchangePositionWith('#frontpage_slider_menu li:eq(2)');

是否有任何想法重新排序ul，以便活动元素始终位于正确的相邻li的中间？ Stackoverflow - Referred.

重新排列<ul>的顺序以使活动元素保持在中心</ul>

0 个答案: