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();
    });

我正在寻找像bootstraps这样的系统。

Answer 1

将jquery.min.js添加到您的代码中。
使用$( "nav.navigation-bar" ).toggleClass("open");
而不是$( ".navigation-bar" ).toggle();
当菜单展开时，它会覆盖切换按钮。因此，按钮变得无法访问。您可以通过将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的按钮，它曾经位于下拉列表中的第一个链接层（示例链接）

导航响应问题

2 个答案: