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

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

2 个答案: