gpt4 book ai didi

用于扩展导航栏的 Javascript 代码无法按预期工作

转载 作者:太空宇宙 更新时间:2023-11-04 06:59:31 24 4
gpt4 key购买 nike

我正在为我的网站制作导航栏,我已经制作了一些 Javascript 与 CSS 一起使用。 在运行它之前,请确保结果窗口的宽度小于 760 像素。

function compressNavbar() {
var x = document.getElementById("navbar");
if (x.className === "responsive-h2") {
x.className += " responsive-h2-expand";
} else {
x.className = "responsive-h2";
}
}
ul.blue {
background-color: DodgerBlue;
}

ul.blue * {
color: white;
}


/* Horizontal navbar */

ul.horizontal-navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

.horizontal-navbar li {
float: left;
}

.horizontal-navbar li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}


/* responsive */

@media screen and (max-width: 760px) {
ul.responsive-h2 li {
display: block;
}
ul.responsive-h2 li:not(:first-child):not(:last-child) {
display: none;
/* Remove all links except home and the menu button */
}
ul.responsive-h2-expand {
position: relative;
}
.responsive-h2-expand li:last-child {
position: absolute;
right: 0;
top: 0;
}
ul.responsive-h2-expand li {
float: none !important;
display: block !important;
}
ul.responsive-h2-expand li * {
text-align: left !important;
}
ul.responsive-h2-expand li a {
padding: 10px 14px;
padding-left: 18px;
padding-bottom: 11px;
}
ul.responsive-h2-expand li {
list-style-type: none;
}
}
<ul class="responsive-h2 horizontal-navbar blue" id="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li>
<a href="javascript:void(0)" onclick="compressNavbar()">
Menu
</a>
</li>
</ul>

一开始工作正常——我们有一个漂亮的、样式化的导航栏,除了主页和菜单按钮之外,所有链接都丢失了。但是,当我按下菜单按钮时,展开的导航栏没有使用我的 blue 类设置样式,也没有包含我的所有链接。此外,当再次按下菜单时,我的大部分样式都丢失了。

导致这种情况发生的代码有什么问题?由于我是 JS 的新手,我假设是这样的——我想我可能在使用 className 时做错了,但我不知道是什么或如何修复它。

提前致谢。

最佳答案

我认为使用classList.toggle会更好:

function compressNavbar() {
var x = document.getElementById("navbar");
x.classList.toggle("responsive-h2-expand");
}

关于用于扩展导航栏的 Javascript 代码无法按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52135719/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com