开发者社区> 问答> 正文

click触发问题

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

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

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

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提问。。

展开
收起
杨冬芳 2016-06-21 14:24:07 2102 0
1 条回答
写回答
取消 提交回答
  • IT从业

    没太懂为什么又在事件里绑了一次事件,直接写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';
        }    
    }
    2019-07-17 19:44:53
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载