导航响应问题

Question

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

Codepen：http://codepen.io/anon/pen/RRGvYV

HTML：

    <div class="navigation-group">
        <div class="container">
        <div class="navigation-top">    
        <a class="nav-name">Architect</a>
        <button class="nav-toggle" id="nav-toggle">A</button>
        </div>    
            <nav role="navigation" class="collapase navigation-bar">
                <ul class="nav">
                    <li><a href="#">Examples</a></li>
                    <li><a href="#">Download</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                <ul class="nav nav-right">
                    <li><a href="#">Extra</a></li>
                    <li><a href="#">Extra</a></li>
                </ul>
            </nav>
        </div>
    </div> 

CSS（SASS）：

@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

jQuery:

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

我正在寻找类似引导程序的系统。

Answer 1

1. 将jquery.min.js 添加到您的代码笔中。
2. 使用$( "nav.navigation-bar" ).toggleClass("open");
   而不是$( ".navigation-bar" ).toggle();
3. 展开菜单时，它会覆盖切换按钮。因此，该按钮变得无法访问。您可以通过将z-index: 20; 属性添加到.nav-toggle 类来解决此问题。

查看结果：http://codepen.io/glebkema/pen/BzLbve

Answer 2

我唯一更新的是在您的 codepen 中使用 jquery。就这些了，希望对你有帮助。请参阅 codepen：http://codepen.io/anon/pen/BzLMgx。此外，您应该添加括号和 CSS 语法。添加了外部https://code.jquery.com/jquery-2.2.4.min.js 代码。另外我将z-index 编辑为按钮的20，它曾经位于下拉列表中第一个链接的图层下（示例链接）