jquery 点击切换如何做，就是如果点击两次同一个panel，就会恢复原来的样子
我想实现的效果是如果点击同一个元素的话就恢复flex:1？
能不能用 "transitionend"事件代替settimeout,为什么我使用transitionend不起作用？
<p data-height="265" data-theme-id="0" data-slug-hash="NbEQZr" data-default-tab="css,result" data-user="liuestc" data-embed-version="2" data-pen-title="NbEQZr" class="codepen">See the Pen NbEQZr by liuestc (@liuestc) on CodePen.</p>
<script async src="https://production-assets.cod...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin:0;
}
.panels{
display: flex;
/*justify-content:center;*/
justify-content:center;
color:#fff;
font-size: 24px;
font-weight: 600;
}
.panel{
overflow: hidden;
height:100vh;
flex:1;
display: flex;
flex-direction:column;
justify-content:center;
align-items:center;
/*一会研究一下这两个属性。彻底搞懂*/
background: cover;
background-position: center;
transition: font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
background 0.2s;
}
.panel.open{
flex:5;
font-size: 30px;
}
.panel>*{
flex:1;
justify-content:center;
align-items:center;
display:flex;
transition: all .5s ease;
}
/*.panel>p.open{
transform:translateY(0%);
}*/
.panel>p:first-child{
transform: translateY(-100%);
}
.panel.active>p:first-child{
transform: translateY(0%);
}
.panel>p:last-child{
transform: translateY(100%);
}
.panel.active>p:last-child{
transform: translateY(0%);
}
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
</style>
<body>
<p class="panels">
<p class="panel panel1">
<p>Hey</p>
<p>Let's</p>
<p>Dance</p>
</p>
<p class="panel panel2">
<p>Give</p>
<p>Take</p>
<p>Receive</p>
</p>
<p class="panel panel3">
<p>Experience</p>
<p>It</p>
<p>Today</p>
</p>
<p class="panel panel4">
<p>Give</p>
<p>All</p>
<p>You can</p>
</p>
<p class="panel panel5">
<p>Life</p>
<p>In</p>
<p>Motion</p>
</p>
</p>
</body>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script>
$(".panel").on("toggle",function(e){
// var tep.m=$(this).index();
// 如何判断点击的是否和上个元素相同
console.log(e.target)
console.log($(this).index())
$(this).siblings().removeClass("open active");
$(this).addClass("open");
var that=this;
setTimeout(function(){
$(that).addClass("active")
},800)
})
// $(".panel").toggle(function(){
// $(this).siblings().removeClass("open active");
// $(this).addClass("open");
// var that=this;
// setTimeout(function(){
// $(that).addClass("active")
// },800)
// })
//这里为什么不能判断动画结束》？、
$(".panel").on("transtionend",function(){
$(this).addClass("active")
})
</script>
</html>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
这两个能实现吗？
这个满足你的需求。
PS：改了下，这样至少 IE 里不会严重错误。
你的代码具体就不看了，回答一下你的第二个问题：
http://www.runoob.com/jsref/e...
所以，其他浏览器，以及 jQuery 写法自己补一下哈