Блог

Главная - Вопросы по программированию - родительский элемент и parentElement не работают в Internet Explorer

родительский элемент и parentElement не работают в Internet Explorer

#javascript

#javascript

Вопрос:

Я столкнулся с проблемой совместимости с IE11. В частности, var opensubs = parent.parentElement.querySelectorAll(':scope .open'); выдает ошибку. Я думаю, что это parent.parentElement вызывает сбой, но мне трудно найти ресурсы в Интернете. Есть ли альтернатива коду, чтобы он работал в IE?

Ниже приведен полный сценарий. Он отлично работает в других браузерах, за исключением IE.

 <!DOCTYPE html>
<html>
<head>
</head>

<body>

<ul class="tree">
    <li class="myCSS"><a class="tablinks">Parent 1</a>
        <ul></ul>
    </li>
    <li class="myCSS"><a class="tablinks">Parent 2</a>
        <ul></ul>
    </li>
    <li class="myCSS"><a class="tablinks">Parent 3 expander</a>
        <ul>
            <li class="myCSS">Child</li>
            <li class="myCSS">Child</li>
            <li class="myCSS">Child</li>
        </ul>
    </li>
</ul>


</body>

<script type="text/javascript" >
var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i  ){
    tree[i].addEventListener('click', function(e) {
        var parent = e.target.parentElement;
        var classList = parent.classList;
        var closeAllOpenSiblings = function(){        
            var opensubs = parent.parentElement.querySelectorAll(':scope .open');
            for(var i = 0; i < opensubs.length; i  ){
                opensubs[i].classList.remove('open');
            }
        }
        if(classList.contains("open")) {
            classList.remove('open');
        } else {
            closeAllOpenSiblings();
            classList.add('open');
        }
    });
}

</script>

<style>
ul.tree li {
    list-style-type: none;
    position: relative;
}

ul.tree li ul {
    display: none;
    
}

ul.tree li.open > ul {
    display: block;
}

</style>

</html>

Комментарии:

1. parentElement и querySelectorAll должны работать в IE 9 , classList должен работать в 10 . Какую версию IE вы используете? И, пожалуйста, опубликуйте текст ошибки.

2. Я использую IE 11. И нет сообщения об ошибке. Это синтаксическая ошибка, в соответствии с режимом отладки.

3. В опубликованном вами коде нет синтаксической ошибки. Еще раз, пожалуйста, опубликуйте текст ошибки. Я не могу воспроизвести.

4. SCRIPT5022: SyntaxError Это то, что я вижу. Я думаю, это помогает сказать, что код предназначен для дерева меню, которое расширяется и сворачивается. Он расширяется / сворачивается в других браузерах, кроме IE11.