分享一个我遇到的绑定了单击事件却执行两次的案例

这是我在工作中遇到的一个绑定了单击事件却执行两次的案例，下面是一个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 和 查看页面源代码是最好的排查途径！！！