响应菜单使用Javascript，问题

Question

当我点击顶部栏按钮时，我想显示我的菜单，但它确实无法正常工作......

我的JS代码：

var topBarToggle = document.getElementById('top-bar-toggle');
var topBarUl = document.getElementById('top-bar-ul');

topBarToggle.addEventListener('click', onClickOnTopBarToggle, false);

function onClickOnTopBarToggle(e){
    topBarUl.style.display = topBarUl.style.display === 'none' ? '' : 'none';
}

我的CSS代码：

@media screen and (max-width : $container-width){
    ul#top-bar-ul{
        display: none;
    }
}

当我点击按钮时，没有任何反应，我没有任何错误......但<ul>没有获得display:block财产......

编辑＃1：

var topBarToggle = document.getElementById('top-bar-toggle');
var topBarUl = document.getElementById('top-bar-ul');

topBarToggle.addEventListener('click', onClickOnTopBarToggle, false);

function onClickOnTopBarToggle(e){

    console.log(topBarUl.style.display);

    topBarUl.style.display = topBarUl.style.display === 'none' ? 'block' : 'none';
}

日志：

       main.js:101
none   main.js:101
block  main.js:101
none   main.js:101
block  main.js:101
none   main.js:101

Answer 1

在jQuery中是这样的：

$("#top-bar-toggle").on("click", function(){
    $("#top-bar-ul").toggleClass("showMobile");
});

@media screen and (max-width : $container-width){
    ul#top-bar-ul{
        display: none;
    }
    ul#top-bar-ul.showMobile{
        display: block;
    }
}