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'。

以下是示例：fiddle

这里是剧本：

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);
    }
);

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

1 个答案: