这是我在工作中遇到的一个绑定了单击事件却执行两次的案例,下面是一个demo例子:
css样式:
<style>
.dhl{width: 150px;}
.dhl li{width: 100%; box-sizing: border-box;color: #fff;background-color: rgba(0,0,0,0.3);}
.dhl li label{cursor: pointer;padding-left: 10px;display: block;
width: 100%; height: 30px;line-height: 30px;font-size: 16px;background-color: #f3f3f3;
position: relative;
cursor: pointer;
padding: 20px 40px;
background: #363636;
border-bottom: 1px solid #222;
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.dhl li input[type='checkbox']:checked ~ .contents{
max-height: 500px;
z-index: 10;
background: #222;
overflow-y: auto;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
opacity: 1;
}
.dhl li .contents {
max-height: 0;
opacity: 0;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-ms-transition: all 0.4s;
transition: all 0.4s;
position: relative;
overflow: hidden;
width: calc(100%);
box-sizing: border-box;
}
</style>
htm代码:
<ul class="dhl">
<li>
<input type="checkbox" id="apper1" style="display: none;">
<label for="apper1">
1.金钱
</label>
<div class="contents">
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
</div>
</li>
<li>
<input type="checkbox" id="apper2" style="display: none;">
<label for="apper2">
2.爱情
</label>
<div class="contents">
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
</div>
</li>
<li>
<input type="checkbox" id="apper3" style="display: none;">
<label for="apper3">
3.事业
</label>
<div class="contents">
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
</div>
</li>
<li>
<input type="checkbox" id="apper4" style="display: none;">
<label for="apper4">
4.学习
</label>
<div class="contents">
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
<p>天使地利人和</p>
</div>
</li>
</ul>
js部分:
<script>
$('.dhl li').click(function(){
console.log('你是一个大傻瓜');
});
</script>
通过点击一次,从浏览器F12控制台会发现,输出了两次“你是一个大傻瓜”。
经过排查是input标签的原因,单机事件绑定在父元素li上,但里面的input复选框被点击到,变为选中状态时,也执行多一次单击事件了,所有导致出现两次“你是一个大傻瓜”。纯CSS+复选框或单选框 是可以制作出一个左侧点击展开,再点击缩回(单选框不行)的交互效果的侧边栏,但是全部点击全部都是展开的交互效果不够人性化,应该是点击当前的展开,其他的子菜单都收缩回来才好。更好的人性化提示是在子菜单下,点击链接跳转之后,当前链接字体会变红,可以更好的提示用户当前在哪个子菜单页面里。
所以当遇到问题时,最好的办法就是一个一个的去排查,把怀疑的地方注释掉看是否正常。F12 和 查看页面源代码是最好的排查途径!!!