导航栏折叠时如何更改类？

问题描述

当涉及到Web开发时，我对Javascript还是陌生的。我正在使用引导程序来构建导航栏。我的导航栏在展开时看起来不错，但在折叠时会弄乱设计。我的代码看起来像这样

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>E-Commerce</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="">E-Commerce</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
          </li>
        </ul>
        <div class='form-inline my-2 my-lg-0'>
            <a href="" class="btn btn-warning change-style" style="margin-right:5px;">SignUp</a>
            <a href="" class="btn btn-warning change-style">Login</a>
            <a href=""><img id="cart-icon" src="" alt="cart"></a>
            <p id="cart-total">0</p>
        </div>
      </div>
    </nav>



    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>
</html>

我的自定义样式表main.css具有以下代码

#cart-icon {
  width: 25px;
  display: inline-block;
  margin-left: 15px;
}

.bg-dark {
  background-color: #4f868c !important;
}

#cart-total {
  display: block;
  text-align: center;
  background-color: red;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  width: 20px;
  height: 25px;
}

当导航栏折叠我的登录名时，注册按钮显示在折叠的导航栏菜单中的一行中，但我希望将它们显示为单独的导航栏链接，就像Home链接一样，并松开btn类。我已经尝试编写以下js脚本，但是无法产生预期的效果。

var toggleButton = document.getElementsByClassName("navbar-toggler");
toggleButton[0].addEventListener("click",() => {
  var buttons = document.getElementsByClassName("change-style");
  for (i = 0; i < buttons.length; i++) {
    buttons[i].className = "nav-link";
  }
});

有人可以帮忙吗？

解决方法

您必须确保样式能够响应，并且一旦类或标签达到特定的高度和宽度，就可以为其设置一系列额外的样式。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="">E-Commerce</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
      </li>
    </ul>
    <div class='form-inline my-2 my-lg-0'>
        <a href="" class="btn btn-warning change-style" style="margin-right:5px;">SignUp</a>
        <a href="" class="btn btn-warning change-style">Login</a>
        <a href=""><img id="cart-icon" src="" alt="cart"></a>
        <p id="cart-total">0</p>
    </div>
  </div>
</nav>

对于CSS

 #cart-icon {
  width: 25px;
  display: inline-block;
  margin-left: 15px;
}

.bg-dark {
  background-color: #4f868c !important;
}

#cart-total {
  display: block;
  text-align: center;
  background-color: red;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  width: 20px;
  height: 25px;
}

@media only screen and (max-width: 600px){
  .btn{
    display: block;
    margin-bottom: 1rem;
    float: left;
  }
  
  .form-inline{
    flex-direction: column;
    align-items: flex-start;
  }
}

我希望这将是您的愿望效果。我知道我的回答通常不是100％完美，因为我现在正在做的是更改 BOOTSTRAP样式 到ui时，这是一个很大的问题。

您现在要做的是要通过引导程序来创建导航栏。使用引导程序可以轻松创建导航栏，但很难根据需要进行样式设置。我建议您了解更多有关基本CSS和javascript的信息，然后重试。

并且您的javascript代码语法不正确。

django-templates html javascript navbar visual-web-developer

导航栏折叠时如何更改类？

问题描述

解决方法

相关问答