向伪选择器添加jQuery事件处理程序

Adding jQuery event handlers to pseudo selectors

本文关键字：事件处理 程序 jQuery 添加 选择器      更新时间：2023-09-26

我已经改变了自定义选择框的样式，甚至改变了css:after属性的箭头。

现在我的问题是，当我点击向下箭头下拉不打开。它是正确的，因为它在选择框的顶部。我怎么能使它工作，所以当用户点击向下箭头下拉应该打开。

<div class="select-holder select-wrap poRel col-xs-4 col-sm-4 cntry-drop-down is-valid">
  <select class="select-item validate-me p-normal-text is-valid" data-validation-type="select_validation" id="ship_country" name="ship_country" data-default-msg="Country" autocomplete="off" tabindex="3">
    <option class="p-normal-text default-selected-value" value="" selected="selected">Country</option>
    <option class="p-normal-text" value="US" selected="">USA</option>
    <option class="p-normal-text" value="AU">Australia</option>
  </select>
</div>

CSS -用于将箭头放置在select元素旁边

.select-holder:after {
    top: 12px;
    position: absolute;
    left: calc(100% - 50px);
    width: 0;
    height: 0;
    content: "'e259";
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.2em;
}

工作演示在这里。

如何在箭头上绑定点击事件，使其打开选择框

你可以使用下面的CSS:

.select-holder:after {
  pointer-events: none;
  /* the rest of your code */
}

它将阻止箭头上的单击事件，因此它将冒泡到父元素，使其按照您的要求工作。

更新CodePen

相关文章：