点击下拉菜单中的链接关闭下拉菜单不会去链接

Question

我想创建一个响应下拉菜单。除了尝试选择其中一个菜单链接时，菜单完美工作。点击链接会关闭菜单，但不会打开您刚刚保留在当前页面上的链接。

我的jQuery来打开菜单：

$('.menu-button').click(function(){ 
    $('nav').addClass('active'); 
}); 

相关CSS：

@media only screen and (max-width:760px) { 
.active{ 
    text-align:center; 
} 

.active ul{ 
    border:1px solid #ccc; 
    margin-top:40px; 
    display:block; 
    width:100%; 
} 

.active ul li { 
    border:1px solid #ccc; 
    margin:0; 
    width:100%; 
    height:40px; 
    line-height:40px; 
} 
.active ul li a { 
    display:block; 
} 

.active a:hover { 
    background-color:#ecf1fc; 
    color:#020202; 
    top:0; 
} 
} 

你可以在www.teal.indiancreekboulderingclub.com.

我刚学的jQuery检查出现场，所以请保持javascript解释初级。预先感谢您的帮助。

Answer 1

检查你的CSS我注意到了这一点：

@media only screen and (max-width: 760px) { 
    nav ul, nav:active ul { 
     display: none; 
    } 
} 

修改成：

@media only screen and (max-width: 760px) { 
    nav ul { 
     display: none; 
    } 
} 

你的jQuery似乎运作良好。但是你可以将其更改为：

jQuery(document).ready(function($) { 
    $('.menu-button').click(function(){ 
     $('nav').toggleClass('active'); 
    }); 
}); 

这将允许用户显示和隐藏的导航。

Answer 2

您需要将'active'类移动到ul标记而不是nav标记。

site.js，更改为：

jQuery(document).ready(function($) { 
    $('.menu-button').click(function(){ 
     $('nav ul').toggleClass('active'); 
    }); 
}); 

的style.css，在线296：

@media only screen and (max-width: 760px) { 

    ul.active { 
     border:1px solid #ccc; 
     margin-top:40px; 
     display:block; 
     width:100%; 
     padding-left: 0; 
     list-style: none; 
    } 

    ul.active li { 
     border: 1px solid #ccc; 
     margin:0; 
     width: 100%; 
     height:40px; 
     line-height:40px;  
     border-left: 0; 
     border-right: 0; 
    } 

    ul.active li a { 
     display:block; 
    } 

    ul.active a:hover { 
     background-color:#ecf1fc; 
     color:#020202; 
     top:0; 
    } 
}