布局
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="wrapper" class="wrapper">
<button id="clickMe">点我</button>
<div id="popover" class="popover">
<input type="checkbox">浮层
</div>
</div>
</body>
</html>
CSS
body{
border: 1px solid red;
}
.wrapper{
position: relative;
display: inline-block;
}
.popover{
border: 1px solid red;
position: absolute;
left: 100%;
top: 0;
white-space: nowrap;
padding: 10px;
margin-left: 10px;
background: white;
display: none;
}
.popover::before{
position: absolute;
right: 100%;
top: 5px;
border: 10px solid transparent;
border-right-color: red;
content: '';
}
.popover::after{
position: absolute;
right: 100%;
top: 5px;
border: 10px solid transparent;
border-right-color: white;
content: '';
margin-right: -1px;
}
方案一
JS
clickMe.addEventListener('click', function(e){
popover.style.display = 'block'
})
wrapper.addEventListener('click', function(e){
e.stopPropagation()
})
document.addEventListener('click', function(){
popover.style.display = 'none'
})
方案二
JS
$(clickMe).on('click', function() {
$(popover).show()
console.log('show')
setTimeout(function() {
console.log('添加 one click')
$(document).one('click', function() {
console.log('我觉得这里不会执行')
console.log('hide')
$(popover).hide()
})
}, 0)
})
冒泡动画
HTML
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="red">
<div class="blue">
<div class="green">
<div class="yellow">
<div class="orange">
<div class="purple">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{margin:0;padding:0;box-sizing:border-box;}
.red.active {
background: red;
}
.blue.active {
background: blue;
}
.green.active {
background: green;
}
.yellow.active {
background: yellow;
}
.orange.active {
background: orange;
}
.purple.active {
background: purple;
}
div {
border: 1px solid black;
padding: 10px;
transition: all 0.5s;
display: flex;
flex:1;
border-radius: 50%;
background: white;
}
.red{
width: 100vw;
height: 100vw;
}
JS
let divs = $('div').get()
let n = 0
for (let i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', () => {
setTimeout(() => {
divs[i].classList.add('active')
}, n * 500)
n += 1
}, true)
}
for (let i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', () => {
setTimeout(() => {
divs[i].classList.remove('active')
}, n * 500)
n += 1
})
}
