下拉菜单（Dropdown Menu）中onclick函数无法正常工作求助

问题1：拼写错误 #

你的HTML代码里第一个选项的点击事件属性拼写错误：onlcick → 应为onclick，这个错误直接导致第一个选项点击后无法触发show函数。

问题2：事件冒泡干扰 #

点击下拉选项时，事件会向上冒泡到.dropdown元素，触发它的onclick事件，导致下拉菜单自动收起，影响交互体验。需要在选项的点击事件中阻止冒泡。

问题3：CSS属性错误 #

.dropdown input的height值写成了100，缺少单位%，会导致输入框高度显示异常。

修复后的完整代码 #

JavaScript（新增阻止冒泡逻辑）

function show(anything, e) {
  // 阻止事件冒泡，避免触发dropdown的onclick
  e.stopPropagation();
  document.querySelector('.textBox').value = anything;
  // 可选：点击选项后自动收起菜单
  dropdown.classList.remove('active');
}
let dropdown = document.querySelector('.dropdown');
dropdown.onclick = function() {
  dropdown.classList.toggle('active');
}

CSS（修正height属性）

@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: #fafafa;
}

.dropdown {
  position: relative;
  margin-top: 100px;
  width: 300px;
  height: 50px;
}

.dropdown::before {
  content: "";
  position: absolute;
  right: 20px;
  top: 15px;
  z-index: 10000;
  width: 8px;
  height: 8px;
  border: 2px solid #333;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-45deg);
  transition: 0.5s;
  pointer-events: none;
}

.dropdown.active::before {
  top: 22px;
  transform: rotate(-225deg);
}

.dropdown input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 修正这里，添加% */
  cursor: pointer;
  background: #fff;
  border: none;
  outline: none;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  padding: 12px 20px;
  border-radius: 10px;
}

.dropdown .option {
  position: absolute;
  top: 70px;
  width: 100%;
  background: #fff;
  box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  overflow: hidden;
  display: none; /* 去掉注释，默认隐藏选项 */
}

.dropdown.active .option {
  display: block;
}

.dropdown .option div {
  padding: 10px 20px;
  cursor: pointer;
}

.dropdown .option div:hover {
  background: #62baea;
  color: #fff;
}

HTML（修正拼写错误，传递事件对象）

<body>
  <h2>Converter</h2>
  <label>Litres</label>
  <div class="dropdown">
    <input type="text" class="textBox" placeholder="HTML" readonly>
    <div class="option">
      <div onclick="show('HTML', event)">HTML</div> <!-- 修正拼写，添加event参数 -->
      <div onclick="show('HTML', event)">HTML</div>
      <div onclick="show('HTML', event)">HTML</div>
      <div onclick="show('HTML', event)">HTML</div>
    </div>
  </div>
</body>

内容的提问来源于stack exchange，提问作者QuratulAin Khalid