javascript - 单击另一个 div 打开列表下拉列表

Question

我有关于下拉选择选项的代码，我必须在单击时尝试我的代码工作

<div class="field-placeholder"><span>Select Yuor Subject</span></div>

下拉列表将展开列表选项，但现在我必须双击同一点才能展开选项

我尝试过使用双击单击()鼠标移到()但不起作用

任何想法这是我的作品

https://jsfiddle.net/ravizikrillah/m6Lc5jwn/2/

Answer 1

您可以通过添加一两个 CSS 规则并删除事件监听器来完成此操作。将以下属性添加到 .field-placeholder:

.field-wrapper .field-placeholder{
  /* ... */

  user-select: none;
  pointer-events: none;
}

pointer-events 规则将关闭元素上的鼠标事件，因此后面的元素将获得它。

用户选择会阻止用户选择元素的内容。

然后，您可以删除 .field-wrapper .field-placeholder 上的 click 事件处理程序。

/*
You can remove the following:

$(".field-wrapper .field-placeholder").on("click", function () {
   $(this).closest(".field-wrapper").find("select").focus(); 
   $(this).closest(".field-wrapper").find(".mySelect").click(); 
});
*/

$('.mySelect').on('change', function() {
  var value1 = $('.mySelect').val();
  if (value1) {
 		$(this).closest(".field-wrapper").addClass("hasValue");
  } else {
    $(this).closest(".field-wrapper").removeClass("hasValue");
  }
});

.field-wrapper{
  position: relative;
  margin-bottom: 30px;
}
.field-wrapper select{
  border: 1px solid #DADCE0;
  padding: 15px;
  border-radius: 4px;
  width: 100%;
  height: 100%;
}
.field-wrapper .field-placeholder{
  font-size: 16px;
  position: absolute;
  bottom: 17px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #80868b;
  left: 8px;
  padding: 0 8px;
  -webkit-transition: transform 150ms cubic- bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
  transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);
  z-index: 1;
  text-align: left;
  width: 100%;
  
  /* Add these rules: */
  user-select: none;
  pointer-events: none;
}
.field-wrapper .field-placeholder span{
  background: #ffffff;
  padding: 0px 5px;
}

.field-wrapper select:not([disabled]):focus~.field-placeholder{
  color: #80868b;
}
.field-wrapper select:not([disabled]):focus~.field-placeholder,
.field-wrapper.hasValue select:not([disabled])~.field-placeholder{
  -webkit-transform: scale(.75) translateY(-39px) translateX(-60px);
  transform: scale(.75) translateY(-39px) translateX(-60px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field-wrapper">
   <select name="subject" class="form-control-modified mySelect">
     <option disabled="disabled" selected="selected" value="">Number (required)</option>
     <option>1</option>
     <option>2</option>
     <option>3</option>                                               
  </select>
  <div class="field-placeholder"><span>Select Your Subject</span></div>
 </div>