Question

我用3个列表构建了一个基本的复选框hack手风琴（请参见下面的代码）。清单1,2和3在chrome中正确打开。在IOS Safari上，仅列表1和2打开正确。清单3不能以纵向视图打开。当我将iPhone转到横向视图时，列表3看起来正确，而当我回到纵向视图时，列表3可以正常工作。有人对这种奇怪的行为有一个解释，还是可以解释以下代码的问题所在？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .section-footer__column-section--list-status:checked+.section-footer__column-section .section-footer__column-section--list{
    position: static;
    visibility: visible;
    z-index: -1;
    -webkit-transform: none;
    transform: none;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;

}

.section-footer__column-section--list {
        overflow: hidden;
        visibility: hidden;
        position: absolute;
        left: 0;
        top: 100%;
        -webkit-transform: translateY(-100px);
                transform: translateY(-100px);
        /*lässt Liste beim toggeln einfliegen von pos -100*/
        padding-bottom: 16px;
    }
</style>
</head>

<body>
    <div class="section-footer__column grid__item  lap--one-quarter desk--one-quarter">
        <input type="checkbox" class="section-footer__column-section--list-status" id="anchor-test1">
        <div class="section-footer__column-section">
            <label for="anchor-test1">
                <h3 class="section-footer__column-section--title">list 1</h3>
            </label>
            <ul class="section-footer__column-section--list">
                <li><a href="">topic 1</a></li>
                <li><a href="">topic 2</a></li>
                <li><a href="">topic 3</a></li>
                <li><a href="">topic 4</a></li>
            </ul>
        </div>
    </div>
    <div class="section-footer__column grid__item  lap--one-quarter desk--one-quarter">
        <input type="checkbox" class="section-footer__column-section--list-status" id="anchor-test2">
        <div class="section-footer__column-section ">
            <label for="anchor-test2">
                <h3 class="section-footer__column-section--title">list 2</h3>
            </label>
            <ul class="section-footer__column-section--list">
                <li><a href="">topic 1 </a></li>
                <li><a href="">topic 2 </a></li>
                <li><a href="">topic 3</a></li>
                <li><a href="">topic 4</a></li>
                <li><a href="">topic 5</a></li>
            </ul>
        </div>
    </div>
    <div class="section-footer__column grid__item  lap--one-quarter desk--one-quarter">
        <input type="checkbox" class="section-footer__column-section--list-status" id="anchor-test3">
        <div class="section-footer__column-section ">
            <label for="anchor-test3">
                <h3 class="section-footer__column-section--title">list 3</h3>
            </label>
            <ul class="section-footer__column-section--list">
                <li><a href="">Download 1 </a></li>
                <li><a href="">Download 2 </a></li>
                <li><a href="">Download 3</a></li>
            </ul>
        </div>
    </div>
</body>

</html>

手风琴的奇怪行为

0 个答案: