如何将导航链接到切换器？

如何解决如何将导航链接到切换器？

使用一些JS将网页编码为实践，除了我不知道如何使切换功能起作用之外，所有内容都按我的方式工作。我尝试了一些尝试，但是没有成功。页面折叠，出现切换，但是单击它时不会弹出导航。提示和建议将非常有用，感谢您的耐心配合！

<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>