我有两种隐藏绿色容器的方法,一种是使用第一种方法(使用切换方法),另一种是使用第二种方法,单击绿色容器之外的任何地方以将其隐藏,因此这两种方法都适用于
PC和Android上的所有主要浏览器,但由于某种原因,第二种方法不适用于移动Safari。意味着什么都没有发生,所以我如何才能在移动Safari上使用第二种方法?
并防止混淆我的代码示例。带金和银的红色div是触发触发器。按下以查看该绿色容器。
这是我的代码
document.addEventListener('DOMContentLoaded', function() {
var container = document.querySelector('.container');
container.addEventListener('click', function(execute) {
execute.stopPropagation();
});
document.addEventListener('click', closeContainer);
document.getElementById('toggle').addEventListener('click', function(event){
//this event will be called if the element with the 'toggle' ID or any of its children are clicked
var containerVar = document.querySelector('.container');
if(container.style.display !== 'block'){
//show container
container.style.display = 'block';
//prevent the document click listener from being triggered
event.stopPropagation();
}
});
function closeContainer(obj) {
var containerVar = document.querySelector('.container');
containerVar.style.display = 'none';
}
});
#toggle{
background-color: red;
display: inline-block;
padding: 15px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
#toggle #a{
background-color: gold;
margin: 0;
height: 10px;
width: 25px;
}
#toggle #b{
background-color: silver;
margin: 0;
height: 10px;
width: 25px;
}
.container {
background-color: green;
height: 350px;
width: 350px;
margin-left: auto;
margin-right: auto;
display: none;
}
<style>
</style>
<script>
</script>
<div id='toggle'>
<div id='a'></div>
<div id='b'></div>
</div>
<div class='container'></div><!--</container>-->