javascript - 为什么当我点击它时我的子菜单不显示

标签 javascript ios animation internet-explorer-11 navbar

我正在为移动设备制作一个网站，但我的导航栏有问题。事实上，一切都在 Chrome、Opera、Mozilla 和我的 Android 网络浏览器上完美运行，但在 IE11 和 iOS 上无法运行...

我检查了 Javascript 是否在 IE11 和 iOS 浏览器上都启用了，我也去了其他使用 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');
        };
    };
};

最佳答案

因为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 添加 polyfill。

在IE浏览器中的结果是这样的:

enter image description here

关于javascript - 为什么当我点击它时我的子菜单不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57850637/

上一篇：ios - 构建黑暗模式/iOS 13 应用程序以供发布(在 Xcode 11 或 Xcode 10 上似乎不可能)

下一篇：ios - 在 Swift 中使用 application/vnd.wfa.wsc 创建 NDEF WiFi 记录

相关文章：

javascript - WebStorm 自动重新格式化 JS 代码选项 : newline after class declaration - before '{' ?

ios - Corebluetooth 在不终止蓝牙连接的情况下终止大数据传输

iphone - xcode 4 第二个目标？

ios - 我可以用动画围绕中心旋转 UIImage 吗？

javascript - 如何将指标圆绘制到谷歌图表折线图上

javascript - Angular - 如何跨模块共享 Controller ？

javascript - 在 JavaScript 中如何表示 'not in'？

ios - UICollectionView : animation custom layout

jquery - 如何创造更好的爆炸效果

android - 在 ListView 中单击复选框时，如何使按钮栏从底部滑入？

©2024 IT工具网  联系我们