CSS Simple Dropdown 点击事件答案

【问题标题】：CSS Simple Dropdown click eventCSS Simple Dropdown 点击事件
【发布时间】：2022-02-07 04:36:27
【问题描述】：

我正在尝试构建一个非常简单的功能，以便在单击某个文本字段时创建一个下拉列表。

$(".val").children("div").on("click", function() {
  alert("CLICK");
});

.container {
  display: inline-block;
}

.val {
  display: none;
  position: absolute;
  z-index: 1;
}

.container:focus-within .val {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="lab" contenteditable>LABEL</div>
  <div class="val">
    <div>VAL1</div>
    <div>VAL2</div>
  </div>
</div>

主要问题在于它永远不会被触发的点击功能......（我猜它首先在 CSS 中失去焦点，然后在隐藏的元素中没有点击？）

即使那里有“警报”，我想使用click 事件将值设置回.lab 字段中，就像下拉菜单一样。

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

在下面的解决方案中，单击应用了.lab 类样式的<div> 元素将触发第一个事件侦听器，并且下拉列表将可见。单击下拉列表中实现.clickable 类样式的任何<div> 元素会触发第二个事件侦听器。在这种情况下，下拉列表被关闭，点击的<div>元素的id值被打印到控制台。

/* Fires when clicking the <div> element with the ".lab" class style applied. */
$(document).on('click', '.lab', function(event) {
  event.stopPropagation();
  console.clear();
  console.log("The dropdown list opens.");
  
  /* Open Dropdown List */
  $('.val').attr('style', 'display: inline-block');
  
  /* Fires when clicking the <div> element with the ".clickable" class style applied. */
  $(document).on('click', '.clickable', function(event) {
    event.stopPropagation();
    console.clear();
    console.log(`Clicked Container ID: ${$(this).attr('id')}`);
    
    /* Close Dropdown List */
    $('.val').attr('style', 'display: none');
  });
  
  $(document).on('click',function(event){
    event.stopPropagation();
    $('.val').attr('style', 'display: none');
  });
});

div {
  padding: 5px;
}
.container {
  display: inline-block;
}
.lab {
  border: 1px solid blue;
  margin-bottom: 5px;
  cursor: pointer;
}
.val {
  display: none;
  position: absolute;
  z-index: 1;
}
.container:focus-within .val {
  display: block;
}
.clickable {
  cursor: pointer;
  border: 1px solid red;
  margin-bottom: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="container">
    <div class="lab" contenteditable>Open Dropdown</div>

    <div class="val">
      <div id="first" class="clickable">First</div>
      <div id="second" class="clickable">Second</div>
    </div>
  </div>
</body>

【讨论】：

我喜欢你的方法 :) 但我看到它在点击外部时并没有被隐藏...主要是我使用 CSS 和 .container:focus-within正在自动删除课程。你的意思是使用 js 显示隐藏比使用 CSS 更好吗？
我解决了你提到的问题。使用 CSS 开发动态行为很难理解。我更喜欢使用 JS 开发解决方案，因为它更便携和可重复。
是的，我想我不会花太多时间在纯 CSS 上...能够做的事情很有趣，但读起来确实很混乱...谢谢！