javascript - 如何在该列表项之外的列表项中显示内部内容而不被降序列表项覆盖

Question

我有一个带有列表项的网格，您可以单击以切换内部内容以显示自身 - http://jsfiddle.net/TimmyTodd/SUf5y/1/

每个列表项都有一个可见的溢出，但是内部内容会被它之后的任何列表项覆盖（即使内部内容的 z-index 设置在“li”的顶部）。

有什么方法可以使内部内容出现在所有列表项的顶部？

这是我的CSS：

li {
    width: 40px;
    height: 40px;
    display: block;
    float: left;

    position: relative;
    z-index: 1;

    overflow: visible;
}
.innerContentToShow {
    width: 40px;
    height: 40px;

    position: absolute;
    z-index: 2;

    top: -10px;
    left: -10px;

    border: 10px solid #ccc;
    background-color: transparent;
}
.innerContentToShow p {
    text-align: center;
    font-size: 12px;
    background-color: #fff;
    padding: 5px;
    margin-top: 28px;
}

还有我的一些 HTML 列表代码：

<ul>
    <li>
    <div class="innerContentToShow">
            <p>Lorem Ipsum</p>
        </div>
    </li>
    <li>
    <div class="innerContentToShow">
            <p>Lorem Ipsum</p>
        </div>
    </li>
    <li>
        <div class="innerContentToShow">
            <p>Lorem Ipsum</p>
        </div>
    </li>
</ul>

Answer 1

您必须将点击的“li”的 z-index 设置得更高，作为回报，之前点击的“li”会返回。

这是一个例子：小提琴

这里的脚本：

var oldli;
$('li').click(
    function(){
        $(oldli).toggleClass('displayNone displayBlock');
        $(oldli).css("z-index","1");
        $(this).toggleClass('displayBlock displayNone');
        $(this).css("z-index","5");
        oldli=$(this);
    }
);