为什么我的子菜单不显示

Question

我正在建立一个用于移动设备的网站，而导航栏有问题。实际上，所有功能都可以在Chrome，Opera，Mozilla和我的Android网络浏览器上完美运行，但在IE11和iOS上则无法运行...

我检查了IE11和iOS浏览器是否都启用了Javascript，确实如此，我还去了其他使用JS导航栏的网站，它们都可以工作，只有我的网站不起作用，我也不明白为什么，因为即使最简单的东西，即我的子菜单，不会显示。

我知道使用JQuery可以使我的代码更简单，但是我对JQuery或Javascript一无所知。我是一个初学者，所以是。我想这个问题很愚蠢，但我找不到解决方法。 ;-;

希望我已经足够清楚，在此先感谢您的帮助！ ：）

这是我的代码：

<nav id="nav">
    <div id="nav-menu-toggler">
        <span>MENU</span>
        <div id="nav-toggler"></div>
    </div>
    <ul id="contenu-menu-1">

        <li class="nav-item-1 trait-orange">
            <a href="#" class="nav-link-1">LI1</a>
            <ul class="contenu-menu-2">
                <li class="nav-item-2"><a href="li1.1.." class="nav-link-2">li1.1</a></li>
                <li class="nav-item-2"><a href="li1.2.." class="nav-link-2">li1.2</a></li>
                <li class="nav-item-2"><a href="li1.3.." class="nav-link-2">li1.3</a></li>
            </ul>
            <div class="afficher"></div> <!-- will display an arrow icon-->
        </li>

        <li class="nav-item-1 trait-orange">
            <a href="#actualites" class="nav-link-1">LI2</a>
        </li>

        <li class="nav-item-1 trait-orange">
            <a href="li3" class="nav-link-1">LI3</a>
            <ul class="contenu-menu-2">
                <li class="nav-item-2"><a href="oenotourisme.php" class="nav-link-2">li3.1</a></li>
                <!-- ...and so on -->
            <div class="afficher"></div>
        </li>
    </ul>
</nav>

#nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    min-height: 50px;
    width: 320px;
    z-index: 500;
    margin: 0 auto 5px auto;
}

#nav-menu-toggler {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 50px;
    cursor: pointer;
    font-size: 16px;
    font-family: "lato";
    letter-spacing: 2px;
}

#nav-toggler {
    width: 28px;
    height: 28px;
    margin-left: 8px;
    background-image: url('../img/icone-menu.png');
    background-size: cover;
    background-repeat: no-repeat;
}

#contenu-menu-1 {
    background-color:#3f372f;
    width: 100%;
    text-align: center;
    letter-spacing: 2px;
    list-style-type: none;
    visibility: hidden;
    opacity: 0;  
    max-height: 0;
    overflow: hidden;
    transition: all 1s linear;
}

#contenu-menu-1.show {
    border-top: 1px solid rgba(255,255,255,.5);
    border-bottom: 1px solid rgba(255,255,255,.5);
    visibility: visible;
    opacity: 1;
    max-height: 800px;
    margin-bottom: 10px;
}

.contenu-menu-2 {
    list-style-type: none;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 1s linear;
}

.contenu-menu-2.show {
    visibility: visible;
    opacity: 1;
    max-height: inherit;
    margin-bottom: 20px;
}

#contenu-menu-1 > .nav-item-1 { 
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-height: 300px;
}
#contenu-menu-1 > .nav-item-1:hover {   
    border-radius: 0 0 3px 3px;
}

.contenu-menu-2 > .nav-item-2 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    letter-spacing: initial;
}

#contenu-menu-1  .nav-item-1 > .nav-link-1 {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 14px;
    width: 100%;
    padding: 10px 0;
    line-height: 30px;
    z-index: 200;
}

.contenu-menu-2 > .nav-item-2 .nav-link-2 {
    color: white;
    text-decoration: none;
    width: 100%;
    line-height: 25px;
    z-index: 300;
}

.contenu-menu-2 > .nav-item-2 .nav-link-2:hover {
    color: white;
}


#contenu-menu-1 > .nav-item-1.trait-orange::after {
    position: absolute;
    content: "";
    height: 5px;
    width: 25px;
    background-color: rgb(211, 70, 30);
    bottom: -2.5px;
    z-index: 400;
}

.afficher-haut {
    position: absolute;
    right: 2px;
    top: 12px;
    display: block;
    height: 25px;
    width: 25px;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 100;
    background-image: url('../img/fleche-haut-menu.png');
}

.afficher-bas {
    position: absolute;
    right: 2px;
    top: 12px;
    display: block;
    height: 25px;
    width: 25px;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 100;
    background-image: url('../img/fleche-bas-menu.png');
}

window.onload = function () {
    var bouton_menu = document.getElementById('nav-menu-toggler');
    var contenu_menu_1 = document.getElementById('contenu-menu-1');
    var contenu_menu_2 = document.getElementsByClassName('contenu-menu-2');
    var afficher = document.getElementsByClassName('afficher');

    bouton_menu.onclick = function () {
        for (let item of afficher) {
            if (item.classList.contains('afficher-haut')) {
                item.classList.remove('afficher-haut');
            } else {
                item.classList.toggle('afficher-bas');
            }
        };
        contenu_menu_1.classList.toggle('show');
        for (let item of contenu_menu_2) {
            item.classList.remove('show');
        };
    };
    for (var n = 0; n < 6; n++) {
        var li_menu_1 = document.getElementsByClassName('nav-link-1')[n];
        li_menu_1.onclick = function () {
            this.nextElementSibling.classList.toggle('show');
            var afficher = this.nextElementSibling.nextElementSibling;
            afficher.classList.contains('afficher-haut') ? afficher.classList.replace('afficher-haut', 'afficher-bas') : afficher.classList.replace('afficher-bas', 'afficher-haut');
        };
    };
};

Answer 1

由于for ... of语句不支持IE浏览器，建议您尝试如下修改代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script>
<script>
    window.onload = function () {
        var bouton_menu = document.getElementById('nav-menu-toggler');
        var contenu_menu_1 = document.getElementById('contenu-menu-1');
        var contenu_menu_2 = document.getElementsByClassName('contenu-menu-2');
        var afficher = document.getElementsByClassName('afficher');

        bouton_menu.onclick = function () {
            for (var i = 0; i < afficher.length; i++) {
                var item = afficher[i];
                if (item.classList.contains('afficher-haut')) {
                    item.classList.remove('afficher-haut');
                } else {
                    item.classList.toggle('afficher-bas');
                }
            };
            contenu_menu_1.classList.toggle('show');
            for (var j = 0; j < contenu_menu_2.length; j++) {
                var item2 = contenu_menu_2[j];
                item2.classList.remove('show');
            };
        };
        for (var n = 0; n < document.getElementsByClassName('nav-link-1').length; n++) {
            var li_menu_1 = document.getElementsByClassName('nav-link-1')[n];
            li_menu_1.onclick = function () {
                this.nextElementSibling.classList.toggle('show');
                var afficher = this.nextElementSibling.nextElementSibling;
                afficher.classList.contains('afficher-haut') ? afficher.classList.replace('afficher-haut', 'afficher-bas') : afficher.classList.replace('afficher-bas', 'afficher-haut');
            };
        };
    };
</script>

和

<nav id="nav">
    <div id="nav-menu-toggler">
        <span>MENU</span>
        <div id="nav-toggler"></div>
    </div>
    <ul id="contenu-menu-1">

        <li class="nav-item-1 trait-orange">
            <a href="#" class="nav-link-1">LI1</a>
            <ul class="contenu-menu-2">
                <li class="nav-item-2"><a href="li1.1.." class="nav-link-2">li1.1</a></li>
                <li class="nav-item-2"><a href="li1.2.." class="nav-link-2">li1.2</a></li>
                <li class="nav-item-2"><a href="li1.3.." class="nav-link-2">li1.3</a></li>
            </ul>
            <div class="afficher"></div> <!-- will display an arrow icon-->
        </li>

        <li class="nav-item-1 trait-orange">
            <a href="#actualites" class="nav-link-1">LI2</a>
        </li>

        <li class="nav-item-1 trait-orange">
            <a href="li3" class="nav-link-1">LI3</a>
            <ul class="contenu-menu-2">
                <li class="nav-item-2"><a href="oenotourisme.php" class="nav-link-2">li3.1</a></li>
                <!-- ...and so on -->
                </ul>
                <div class="afficher"></div>
        </li>
    </ul>
</nav>

由于我们正在使用Element.classList，所以我们还需要为classList添加polyfills。

在IE浏览器中的结果如下：

Answer 2

for ... of循环不适用于IE。您可以检查兼容性here