Javascript 导航响应问题

我的导航栏有问题。我的目标是在桌面上有一个普通的水平导航栏，然后在移动设备上有一个可折叠的导航栏，但有一件事是错误的。我不能隐藏链接，然后在点击切换按钮后显示，有什么帮助吗

代码笔：

HTML:

jQuery：

$( "#nav-toggle" ).click(function(){
   $( ".navigation-bar" ).toggle();
    });

---

我正在寻找一个类似引导的系统。

我唯一更新的是在代码笔中使用jquery。仅此而已，希望对您有所帮助。请参阅代码笔：。此外，还应该添加括号和CSS语法。添加了外部

https://code.jquery.com/jquery-2.2.4.min.js

code。此外，我还将按钮的

z-index

编辑为20，它过去位于下拉列表中第一个链接的层下（示例链接）

将

jquery.min.js

添加到您的代码笔中

使用

$（“导航栏”）.toggleClass（“打开”）

而不是
$（“.navigation bar”）.toggle（）

当菜单展开时，它会覆盖切换按钮。因此，按钮变得不可访问。您可以通过添加

z-index:20来解决此问题属性添加到
.nav toggle
类

---

检查结果：

是否忘记包含jQuery？它不存在于代码笔中。除此之外，你还应该考虑使用<代码>；<代码>和括号用于CSS，以确保一致性和概述。为什么不使用Bootstrap…？没有任何变化？很抱歉，我更新了代码笔，现在使用“A”按钮作为单击事件。这对@Zoid有帮助吗？

@media (min-width : 768px)
    .navigation-bar
        list-style-type: none

        ul
            float: left

        li
            float: left

        &:before, &:after
            display: table
            content: ""   
    .nav-right
        float: right !important   
    .navigation-top
        width: auto !important
        padding: 5px 20px
        float: left
        line-height: 40px  
    .nav-toggle
        display: none !important   

.open
    display: block!important

.collapase
    display: none

.navigation-top
    width: 100%
    padding: 5px 20px
    float: left
    line-height: 40px 
    border-bottom: solid 1px #E5E5E5
.nav-name
    font-weight: bold
    float: left
.navigation-group
    min-height: 50px
    background-color: #fff
    &:before, &:after
        display: table
        content: ""      


.navigation-bar  

    li
        position: relative
        display: block
        line-height: 40px

    a
        display: block
        color: #000
        text-align: center
        padding: 5px 20px
        font-weight: bold
        text-decoration: none     

    &:before, &:after
        display: table
        content: ""

.navigation-name
    float: left
    padding: 10px 20px
    font-size: 18px
    text-decoration: none
    font-weight: bold
    color: red

.nav-toggle
    display: block
    font-size: 34px
    font-weight: bold
    position: relative
    float: right
    padding: 6px 12px
    margin-top: 0px
    margin-right: 15px
    margin-bottom: 0px
    background-color: transparent
    background-image: none
    border: 1px solid transparent
    border-radius: 4px
    cursor: pointer
    outline: none

$( "#nav-toggle" ).click(function(){
   $( ".navigation-bar" ).toggle();
    });