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

【问题标题】：How to change classes when navbar collapses?导航栏折叠时如何更改类？
【发布时间】：2020-12-04 14:03:18
【问题描述】：

在 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;
}

当导航栏折叠我的登录时，注册按钮出现在折叠的导航栏菜单内的单行中，但我希望它们像主页链接一样显示为单独的导航栏链接，并松开 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";
  }
});

有人可以帮忙吗？

【问题讨论】：

如果您不提供自定义 css + 您正在使用的 css 库，我们无法测试。
嘿，我已经大大改变了我的问题，以使人们更容易进行测试。你现在能帮忙吗？ :)

标签： javascript html django-templates navbar visual-web-developer

【解决方案1】：

你必须确保你的样式是响应式的，一旦达到特定的高度和宽度，你就可以为你的类或标签设置一堆额外的样式。

【讨论】：

【解决方案2】：

<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 STYLE 当涉及到 ui 时，这是一个很大的问题。

您现在正在做的是您想使用引导程序的帮助来制作导航栏。使用引导程序可以轻松创建导航栏，但很难根据您的需要设置样式。我建议您了解更多有关基本 CSS 和 javascript 的信息，然后再试一次。

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

【讨论】：