Javascript 单击事件在切换栏之间不起作用

我有这个HTML：

<button type="button" class="navbar-toggle" onclick="showNav();">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

这个CSS：

.navbar-toggle {
    margin-top: 15px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    position: absolute;
    z-index: 100;
    padding: 0;
    height: auto;
    &:focus {
        outline: 0;
    }
    .icon-bar {
        background-color: #fff;
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background-color: #4F4644;
        margin-bottom: 4px;
        // &:before {
        //     content: "";
        //     height: 2px;
        //     background-color: #000000;
        //     width: 22px;
        //     margin-top: 5px;
        //     position: absolute;
        //     left: 0;
        //     top: -11px;
        // }
        // &:after {
        //     content: "";
        //     height: 2px;
        //     background-color: #000000;
        //     width: 22px;
        //     margin-top: 6px;
        //     position: absolute;
        //     left: 0;
        // }
    }
}

看起来是这样的：

现在，当我单击此按钮时，我添加了

.show

类，然后它显示了

.dropdown container

div，其中包含菜单项

现在，由于切换之间的间隙，有时它不会显示

.dropdown container

container

---

如何在间隙上实现单击事件？

问题是

下拉列表

id不存在。不添加它将在尝试切换时引发异常<代码>“未捕获的TypeError:无法读取null的属性'classList'”注意它已添加到下面

函数showNav（）{
document.getElementById（“下拉”）.classList.toggle（“显示”）；
}

.navbar-toggle.show{
背景色：红色；
}
.导航栏切换{
边缘顶部：15px；
边界：0；
背景色：透明；
光标：指针；
位置：绝对位置；
z指数：100；
填充：0；
高度：自动；
&：焦点{
大纲：0；
}
}
.图标栏{
背景色：#fff；
显示：块；
宽度：22px；
高度：2倍；
边界半径：1px；
背景色：#4F4644；
利润底部：4倍；
//&：之前{
//内容：“；
//高度：2倍；
//背景色：#000000；
//宽度：22px；
//边缘顶部：5px；
//位置：绝对位置；
//左：0；
//顶部：-11px；
// }
//&：之后{
//内容：“；
//高度：2倍；
//背景色：#000000；
//宽度：22px；
//边缘顶部：6px；
//位置：绝对位置；
//左：0；
// }
}

---

问题在于

下拉列表

id不存在。不添加它将在尝试切换时引发异常<代码>“未捕获的TypeError:无法读取null的属性'classList'”注意它已添加到下面

函数showNav（）{
document.getElementById（“下拉”）.classList.toggle（“显示”）；
}

.navbar-toggle.show{
背景色：红色；
}
.导航栏切换{
边缘顶部：15px；
边界：0；
背景色：透明；
光标：指针；
位置：绝对位置；
z指数：100；
填充：0；
高度：自动；
&：焦点{
大纲：0；
}
}
.图标栏{
背景色：#fff；
显示：块；
宽度：22px；
高度：2倍；
边界半径：1px；
背景色：#4F4644；
利润底部：4倍；
//&：之前{
//内容：“；
//高度：2倍；
//背景色：#000000；
//宽度：22px；
//边缘顶部：5px；
//位置：绝对位置；
//左：0；
//顶部：-11px；
// }
//&：之后{
//内容：“；
//高度：2倍；
//背景色：#000000；
//宽度：22px；
//边缘顶部：6px；
//位置：绝对位置；
//左：0；
// }
}

让我试试这个。小建议：在代码中为

添加一些样式。show

。这样，如果任何读者点击它，他们将看到可见的变化，而不需要打开开发工具来验证it@TheoNeUpKID不过，当我点击间隙时，它不是working@TheoNeUpKID

.show

类已使用我的JS代码添加。我已经有了

show

类，可以将

下拉容器

设置为

block

，但是在切换图标之间，单击事件仍然不起作用。猜猜，继续。这里有一个资源应该会有所帮助。让我试试这个。小建议：在

的代码中添加一些样式。show

。这样，如果任何读者点击它，他们将看到可见的变化，而不需要打开开发工具来验证it@TheoNeUpKID不过，当我点击间隙时，它不是working@TheoNeUpKID

.show

类已使用我的JS代码添加。我已经有了

show

类，可以将

下拉容器

设置为

block

，但是在切换图标之间，单击事件仍然不起作用。猜猜，继续。这里有一个资源应该会有所帮助。建议：避免在视图中使用处理程序。而是使用JS中的初始值设定项函数添加侦听器。建议：避免在视图中使用处理程序。而是使用JS中的初始值设定项函数添加侦听器。

.navbar-toggle {
    margin-top: 15px;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    position: absolute;
    z-index: 100;
    padding: 0;
    height: auto;
    &:focus {
        outline: 0;
    }
    .icon-bar {
        background-color: #fff;
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background-color: #4F4644;
        margin-bottom: 4px;
        // &:before {
        //     content: "";
        //     height: 2px;
        //     background-color: #000000;
        //     width: 22px;
        //     margin-top: 5px;
        //     position: absolute;
        //     left: 0;
        //     top: -11px;
        // }
        // &:after {
        //     content: "";
        //     height: 2px;
        //     background-color: #000000;
        //     width: 22px;
        //     margin-top: 6px;
        //     position: absolute;
        //     left: 0;
        // }
    }
}