使用Javascript onclick的奇怪行为

Question

我有一个需要注册点击的汉堡菜单(然后我会展开菜单..)

汉堡图标/菜单的HTML是:

<div class="burger-menu-holder">
    <a href="#" id="burger-menu">
        &#9776;
    </a>
</div>

CSS很简单:

#burger-menu{
    display: block;
}

注册点击并运行该功能的Javascript是:

var burger = document.getElementById("burger-menu");
burger.addEventListener('click', function(){
    if(burger.style.display=='block'){
        alert("LOL");
    }
}, false);

但是当我点击菜单时没有任何反应.控制台中没有错误,但是当我删除if(burger.style.display == 'block')它时,导致我认为由于某种原因它没有正确测试CSS属性.

Answer 1

问题是汉堡style="display: block;"最初没有(即使它是可见的),所以burger.style.display == 'block'失败了.

测试元素CSS样式的方法不是很可靠.我会去上课:

var burger = document.getElementById("burger-menu");
burger.addEventListener('click', function() {
    if (burger.className === 'show') {
        alert("LOL");
    }
}, false);

HTML:

<a href="#" id="burger-menu" class="show">&#9776;</a>

在CSS中:

.show {
    display: block;
}

类名的另一个好处是,您可以轻松地更改和设置show行为,而不会影响JavaScript代码.