Странное поведение аккордеона - PullRequest
Новая
       15

Странное поведение аккордеона

0 голосов
/ 19 января 2019

Я собрал базовую галочку для хак-гармошки с 3 списками (см. Код ниже). списки 1,2 и 3 открываются правильно в хроме. в 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>
...