时间戳

首页 > 解决方案 > Javascript中的下拉菜单

javascript - Javascript中的下拉菜单

问题描述

当我单击一次按钮时，我已经控制台记录了打印“1”的“计数”；但是，当我第二次单击该按钮时，“计数”仍然显示为“1”；

我已经坚持了一段时间（我的大脑被炸了）；

索引.html

<button id='btn'>Show Yourself</button>
<div class='drop__down'>
  <span>Yay! You found me.</span>
</div>

样式.css

body {
  background: url('https://wallpapercave.com/wp/wp6242088.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 0;
}
.container { 
  position: absolute;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  #btn {
    margin: 0 auto;
    width: 25%;
    padding: 1rem 2rem;
    color: black;
    border-radius: 0.5rem;
    background-color: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px);
    border: none;
  }
  .drop__down {
    width: 25%;
    border: 1px solid #ccc;
    margin: 2rem auto 2rem auto;
    padding: 3rem;
    border-radius: 0.5rem;
    background-color: rgba(255,255,255,0.4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: none;
  }
  span {
    color: black;
    font-size: 1rem;
  }
}

main.js

const btn = document.querySelector('.btn');
const div = document.querySelector('.drop__down');

let count = 0;

btn.addEventListener('click', function() {
  if (count === 0) {
      count += 1;
      div.style.display = 'none';
  } else {
      count -= 1;
      div.style.display = 'block';
  }
});

编辑： 项目的 CodePen

标签： javascripthtmljquerycss

解决方案

<button id='btn'>Show Yourself</button>

您已提供 id id='btn' 并且您正在尝试阅读document.querySelector('.btn');“.btn”

"." - class
"#" - id

`document.querySelector('#btn');`

尝试 # 或将 id 更改为 class

推荐阅读