сделать строки меню в фиксированном div кликабельными - PullRequest
Новая
       13

сделать строки меню в фиксированном div кликабельными

0 голосов
/ 05 июля 2018

Так что у меня проблемы с нажатием на контейнер div, чтобы закрыть мое меню. Всякий раз, когда я нажимаю на область "p", это работает, но если я нажимаю на преобразованные полосы "X", это не будет. Я даже пытался дать каждому элементу z-индекс. Кто-нибудь знает, почему щелчок не работает над «Х»?

Примечание. У меня есть 2 оверлейных кадра с этим элементом «Закрыть X».

Вот мой SCSS: 

.closeIframe {
    position: fixed;
    top: 4%;
    right: 4%;
    cursor: pointer;
    z-index: 200;

    p {
        display: inline-block;
        margin: 0;
        padding: 0;
    }

    .xWrap {
        display: inline-block;
        z-index: 199;
        height: 20px;

        .x {
            width: 20px;
            height: 2px;
            background-color: $color-black;
        }

        .crossTop {
            -webkit-transform: rotate(45deg) translate(8px, 10px);
            transform: rotate(45deg) translate(8px, 10px);
        }

        .crossBottom {
            -webkit-transform: rotate(-45deg) translate(-9px, 6px);
            transform: rotate(-45deg) translate(-9px, 6px);
        }
    }
}

Вот мой HTML: 

<div id="impressumOverlay" class="iframe">
    <div class="closeIframe">
        <p class="upperC">Close</p>
        <div class="xWrap">
            <div class="x crossTop">
            </div>
            <div class="x crossBottom">
            </div>
        </div>
    </div>
    <iframe id="impressumIframe" src="impressum.html" width="100%" height="100%"></iframe>
</div>

Фрагмент из JS: 

var impressumIframe = document.getElementById('impressumOverlay');

function addListeners() {
    var closeIframe = document.querySelectorAll('.closeIframe');
    for (var l = 0; l < closeIframe.length; l++) {
        closeIframe[l].addEventListener('click', closeIframes, false);
    }
}

function closeIframes(e) {
    if (e.target.parentNode.parentNode.id === "impressumOverlay") {
        impressumIframe.style.display = 'none';
    }
}

addListeners();
...