javascript - 防止点击我的下拉菜单的 Div 标签

Question

我需要创建一个下拉菜单，其中在我的选择标签上有一个 div 标签。 div 具有与按钮相同的功能:如果我单击它，它允许展开下拉菜单。我的问题是 div 必须位于选择上方，未检测到点击。我该怎么做(使用 CSS/JS)？我想将 div 保持在具有相同显示的同一位置，但是单击 div 会导致单击选择的操作这是 HTML 和 CSS 代码

.parent {
  width: 200px;
}

.dropdown>div {
  background: grey;
  color: white;
  float: right;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown>select {
  width: 100%;
  height: 2rem;
  right: 0;
  top: 0;
  bottom: 0;
}

.dropdown {
  position: relative;
}

<div class="parent">
  <div class="dropdown">
    <select name="text">
        <option value="value1">Value 1</option>
        <option value="value1">Value 2</option>
        <option value="value1">Value 3</option>
    </select>
    <div>
      <span>v</span>
    </div>
  </div>
</div>

Answer 1

只需添加 pointer-events: none;到有问题的 div。它将允许点击事件“通过”div，就好像它根本不存在一样。点击事件将由其正下方的选择处理。

.parent {
  width: 200px;
}

.dropdown>div {
  background: grey;
  color: white;
  float: right;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* ADD THIS */
  pointer-events: none;
}

.dropdown>select {
  width: 100%;
  height: 2rem;
  right: 0;
  top: 0;
  bottom: 0;
}

.dropdown {
  position: relative;
}

<div class="parent">
  <div class="dropdown">
    <select name="text">
        <option value="value1">Value 1</option>
        <option value="value1">Value 2</option>
        <option value="value1">Value 3</option>
    </select>
    <div>
      <span>v</span>
    </div>
  </div>
</div>