如何实现按钮点击切换元素的显示与隐藏？

核心错误及修正步骤 #

• 类名参数多余的.：classList.toggle()的参数是纯类名，不需要加CSS选择器的.符号，把.cart-show改成cart-show即可。
• 箭头函数语法错误：你用数组括号[]包裹函数体，这会导致执行异常，应该换成块级大括号{}。
• 缺失初始隐藏样式：.product-container默认没有设置display: none，第一次点击无法实现从隐藏到显示的切换，需要补充该初始样式。

修正后完整代码 #

JavaScript

let showCart = document.querySelector(".product-container");
let cart = document.querySelector(".cart");

cart.addEventListener("click", () => {
  showCart.classList.toggle("cart-show")
});

CSS

.cart {
  margin-left: 85rem;
}

.product-container {
  display: none; /* 补充初始隐藏样式 */
}

.cart-show {
  display: block;
}

.cart a {
  filter: invert(43%) sepia(32%) saturate(310%) hue-rotate(347deg) brightness(90%) contrast(88%);
  width: 0rem;
}

span {
  position: absolute;
  margin-left: 2rem;
  margin-top: -1.3rem;
}

HTML

<li class="nav-item cart">
  <a class="nav-link">
    <img src="./assets/icons/cart shopping icon.svg" alt="cart icon"><span>0</span></a>
</li>

<div class="product-container">
  <div class="product-header">
    <h5 class="product-title"></h5>
    <h5 class="price"></h5>
    <h5 class="quantity"></h5>
    <h5 class="total"></h5>
  </div>

  <div class="products">

  </div>
</div>

内容的提问来源于stack exchange，提问作者Learning Smart