使用 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;
    }
}