[英]Javascript pseudo-classes, jQuery event handlers and 'this'
[英]Adding jQuery event handlers to pseudo selectors
我更改了自定義選擇框的樣式,甚至使用 css :after 屬性更改了箭頭。
現在我的問題是當我點擊向下箭頭下拉菜單時沒有打開。 它是正確的,因為它位於選擇框的頂部。 我如何使它工作,以便當用戶單擊向下箭頭下拉菜單時應該打開。
HTML
<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 */
}
它將阻止箭頭上的點擊事件,因此它會冒泡到父級,使其按您的意願工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.