gpt4 book ai didi

javascript - Safari 上的动态隐藏选择列表

转载 作者:行者123 更新时间:2023-11-30 15:21:29 25 4
gpt4 key购买 nike

也许我做错了,但这是我在选择元素上实现的行为:

我创建了一个包含多个 <select> 的页面并使用样式表自定义它们。
对于特定的一个,我在它后面添加了一个 div有风格position: absolute; ,它会显示一个带有复选框的列表,允许进行多项选择。
<select>有一个 unic <option> - 它的目的是显示一个标题,如“选择您的选项”。
为了显示我的自定义列表而不是选项列表,根据主流浏览器的兼容性,我必须实现 onclick像这样的功能:

function showList(input,sIdTarget)
{
//hide the dropdown list, compatible with all browser
$(input).css({ "display": "none" }).blur().css({"display": "" });
$("#"+sIdTarget).css("display","");
}

我仍然对 Safari 有疑问。在 onclick 上调用此函数事件在单击列表元素后触发它。

这是一个示例:https://jsfiddle.net/L6uhkg9h/1/

感谢您的帮助。

最佳答案

您可以禁用下拉列表并将点击处理程序附加到父 DIV,而不是在用户选择下拉列表后使用 JQuery 隐藏它。在 select 元素上设置 pointer-events: none 样式将阻止该元素响应任何点击事件。然后,您可以将点击处理程序附加到 .customSelect:

$('.customSelect').on('click.selectList', function(e) {
e.stopPropagation();
if($("#listeSecteurs").css("display") === "none")
$("#listeSecteurs").css("display","");
else
$("#listeSecteurs").css("display","none");
});

当用户单击 .customSelect DIV 时,您将切换是否显示 #listeSecteurs。当用户点击 #listSecteurs 以外的任何内容时,您想要摆脱 #listSecteurs,因此您将点击处理程序附加到 window 以这样做:

$(window).on('click.selectListWindow', function(e) {
$("#listeSecteurs").css({"display":"none"});
});

请注意 .customSelect 处理程序中的 e.stopPropagation() 将阻止此窗口单击处理程序在 .customSelect div 时被触发被点击。您还需要阻止点击事件从 .hideableSelectList 传播到 window,因为当用户点击前者时,您希望保留 #listSecteurs显示。

$('.hideableSelectList').on('click.selectList', function(e) {
e.stopPropagation();
});

综合起来:

<html>
<head>
<style>
.customSelect{
width: calc(100% - 2px);
background-color: white;
border: solid 1px #AAAAAA;
border-top-width: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.customSelect select{
width: 100%;
padding: 5px 8px;
border: 0px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
overflow:hidden;
}
.customSelect select.collapse{
background: transparent url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png') no-repeat;
background-size: 10px;
background-position: right 10px center;
}
.customSelect select.expanded{
background: transparent url('https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/cross-24-128.png') no-repeat;
background-size: 10px;
background-position: right 10px center;
}
.hideableSelectList{
position: relative;
}
.hideableSelectList div{
background-color: white;
max-height: 300px;
width: 250px;
overflow-y: auto;
overflow-x: hidden;
position: absolute;
padding: 0px 10px;
border: solid 1px #C0C0C0;
z-index: 3;
}
</style>
</head>
<body>
<div class="customSelect" style="width: 195px;">
<select class="collapse" style="width: 195px; z-index: 0; pointer-events: none" >
<option style="height: 0px">-&nbsp;Select your options&nbsp;-</option>
</select><br>
<div class="hideableSelectList" style="z-index: 10;">
<div id="listeSecteurs" style="display: none; left: 0px;">
<ul style="list-style-type: none;">
<li><input type="checkbox">val 1</li>
<li><input type="checkbox">val 2</li>
<li><input type="checkbox">val 3</li>
<li><input type="checkbox">val 4</li>
<li><input type="checkbox">val 5</li>
</ul>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

$(function () {

$('.hideableSelectList').on('click.selectList', function(e) {
e.stopPropagation();
});

$('.customSelect').on('click.selectList', function(e) {
e.stopPropagation();
if($("#listeSecteurs").css("display") === "none")
$("#listeSecteurs").css("display","");
else
$("#listeSecteurs").css("display","none");
});

$(window).on('click.selectListWindow', function(e) {
$("#listeSecteurs").css({"display":"none"});
});
});

</script>
</html>

关于javascript - Safari 上的动态隐藏选择列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43661014/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com