1

所以我有一个这样的清单；

<ul>
  <li>Sausage</li>
  <li>Egg</li>
  <li>Parsnip</li>
  <li>Sarsaparilla</li>
  <li>Burger</li>
  <li>Cilantro</li>
</ul>

我需要将“级联z-index”动态添加到特定的 li，以便我可以指定 ali为顶部，而所有其他lis 逐渐减少。

例如，如果我有一个 jQueryclick()事件绑定到一个函数，该函数会以我想要的方式动态计算z-indexes，然后我单击“Parsnip”，列表现在看起来像这样；

<ul>
  <li style="z-index: 2;">Sausage</li>
  <li style="z-index: 3;">Egg</li>
  <li style="z-index: 4;">Parsnip</li>
  <li style="z-index: 3;">Sarsaparilla</li>
  <li style="z-index: 2;">Burger</li>
  <li style="z-index: 1;">Cilantro</li>
</ul>

单击“香菜”将使列表如下所示；

<ul>
  <li style="z-index: 1;">Sausage</li>
  <li style="z-index: 2;">Egg</li>
  <li style="z-index: 3;">Parsnip</li>
  <li style="z-index: 4;">Sarsaparilla</li>
  <li style="z-index: 5;">Burger</li>
  <li style="z-index: 6;">Cilantro</li>
</ul>

换句话说，被点击的li将有最高的z-index必要带到前面（需要计算，因为lis 的数量可以是任何东西），它的直接兄弟姐妹会低一个，他们的兄弟姐妹会低一个，等等。

我怎么可能做到这一点？列表项不一定需要分配与z-index图示完全相同的数字，只要实现“级联”元素的视觉效果，点击次数最高即可。

4

1 回答 1

3

怎么样

$('li').click(function(){
    var prev = $(this).prevAll();
    var next = $(this).nextAll();
    var count = prev.length;
    if (next.length > count){
        count = next.length;
    }
    $(this).css({zIndex: count+1});
    prev.each(setIndex);
    next.each(setIndex);
    function setIndex(i){
        $(this).css({zIndex: count-i})
    }
});​

http://jsfiddle.net/UaaNn/

于 2012-12-31T02:55:37.277 回答