问题描述
使用一些JS将网页编码为实践,除了我不知道如何使切换功能起作用之外,所有内容都按我的方式工作。我尝试了一些尝试,但是没有成功。页面折叠,出现切换,但是单击它时不会弹出导航。 提示和建议将非常有用,感谢您的耐心配合!
Link to all code on codepen here
下面的HTML代码段
<nav class="navbar navbar-expand-lg px-4" style="font-size:25px;">
<a class="navbar-brand"></a>
<button class="navbar-toggler" data-toggle="collapse" href="myNav" role="button" type="button" >
<span class="toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="myNav">
<ul class="navbar-nav mx-auto text-capitalize">
<li class="nav-item active">
<a class="nav-link" style="font-size:35px;" href="#">home</a>
</li>
<li class="nav-item">
<a class="nav-link " style="font-size:35px;" href="#about">about</a>
</li>
<li class="nav-item">
<a class="nav-link" style="font-size:35px;" href="#store">store</a>
</li>
</ul>
<div class="nav-info-items d-none d-lg-flex ">
<div class="nav-info align-items-center d-flex justify-content-between mx-lg-5">
<span class="info-icon mx-lg-3"><i class="fas fa-phone"></i></span>
<p class="mb-0">+ 123 456 789</p>
</div>
<div id="cart-info" class="nav-info align-items-center cart-info d-flex justify-content-between mx-lg-5">
<span class="cart-info__icon mr-lg-3"><i class="fas fa-shopping-cart"></i></span>
<p class="mb-0 text-capitalize"><span id="item-count">2 </span> items - $<span class="item-total">10.49</span></p>
</div>
</div>
</div>
</nav>
下面的CSS片段
.navbar-toggler {
outline: none !important;
}
.toggler-icon {
font-size: 2.5rem;
color: var(--mainBlue);
}
.nav-link {
color: var(--mainBlue);
font-size: 1.5rem;
transition: all 0.5s ease-in-out;
}
.nav-link:hover {
color: var(--mainYellow);
}
.cart-info__icon {
color: var(--mainBlue);
cursor: pointer;
}
解决方法
我认为您想要Element.classList
。
var toggle = document.querySelector('.toggle');
var nav = document.querySelector('.nav');
toggle.onclick = function() {
nav.classList.toggle('collapsed');
}
.nav {
background: lightblue;
transition: .2s;
}
.nav.collapsed {
opacity: 0;
}
<button class="toggle">Toggle</button>
<div class="nav">
<ul>
<li>
<a href="#">home</a>
</li>
<li>
<a href="#">about</a>
</li>
<li>
<a href="#">store</a>
</li>
</ul>
</div>