javascript - click触发问题

Question

自己写了一个menu点击变成返回的p
我为#menu-back绑定了click事件
动画也能出来，只不过鼠标点击的时候只有精确地点到menu下面的3个p才能触发。（而我想只要点击menu就可以触发变化）答案已经有了。我写JS的时候多绑了一个menuBack.onclick

也就是只有点击图中黑色部分才触发事件。
两条黑线之间的空白部分就没有效果。
怎么解决TAT
是不是#menu-back下没有实际内容所以点不到？
html代码

<p class="menu-back" id="menu-back">
    <p id="menu-back1"></p>
    <p id="menu-back2"></p>
    <p id="menu-back3"></p>
</p>

css代码

#menu-back{
    width: 30px;
    height: 22px;
    margin: 50px auto;
    transition:all 0.8s;
}
#menu-back1,#menu-back2,#menu-back3{
    width: 30px;
    height:2px;
    border-radius: 2px;
    background-color: #000;
    transition:all 0.8s;
}
#menu-back1{
    transform-origin: left;
}
#menu-back2{
    margin: 8px 0;
}
#menu-back3{
    transform-origin: left;
}

js代码

var menuBack = document.getElementById('menu-back');
var meunBack1 = document.getElementById('menu-back1');
var menuBack3 = document.getElementById('menu-back3');
menuBack.addEventListener('click',$menuBack,true);
function $menuBack(){
    if(menuBack.className === 'menu-back'){
        menuBack.onclick = function(){
            meunBack1.style.transform = 'translate(0,10.5px) rotate(-45deg)';
            meunBack1.style.width = menuBack3.style.width = '15px';
            menuBack3.style.transform = 'translate(0,-10.5px) rotate(45deg)';
            menuBack.className = 'menu-back active';
        }
    }
    if(menuBack.className === 'menu-back active'){
        menuBack.onclick = function(){
            meunBack1.style.transform = '';
            meunBack1.style.width = menuBack3.style.width = '';
            menuBack3.style.transform = '';
            menuBack.className = 'menu-back';
        }
    }    
}

来自初学者的第一次segmentfault提问。。

Answer 1

没太懂为什么又在事件里绑了一次事件，直接写if-else逻辑就可以了

var menuBack = document.getElementById('menu-back');
var meunBack1 = document.getElementById('menu-back1');
var menuBack3 = document.getElementById('menu-back3');
menuBack.addEventListener('click',$menuBack,true);
function $menuBack(){
    if(menuBack.className === 'menu-back'){
            meunBack1.style.transform = 'translate(0,10.5px) rotate(-45deg)';
            meunBack1.style.width = menuBack3.style.width = '15px';
            menuBack3.style.transform = 'translate(0,-10.5px) rotate(45deg)';
            menuBack.className = 'menu-back active';
    }
    else if(menuBack.className === 'menu-back active'){
            meunBack1.style.transform = '';
            meunBack1.style.width = menuBack3.style.width = '';
            menuBack3.style.transform = '';
            menuBack.className = 'menu-back';
    }    
}

Answer 2

把事件绑在#menu-back1，#menu-back2，#menu-back3上。