我正在建立一个用于移动设备的网站,而导航栏有问题。实际上,所有功能都可以在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');
};
};
};
最佳答案
因为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浏览器中的结果如下:
关于javascript - 为什么单击子菜单时不显示子菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57850637/