Javascript代码在单击时不显示菜单

我正在建立我的第一个网站，我被javascript与我的响应导航菜单的交互所困扰。我已经开发了HTML和CSS，允许我的导航正确显示，但是当我构建javascript切换菜单时，菜单不会打开或关闭

在我通过overflow:hidden；隐藏菜单之前，HTML和CSS按照规范显示网页；。另外，通过alert（'success'）测试javascript是否正确地应用于报头中；工作

我不明白为什么点击打开/关闭不起作用，提前感谢您的反馈

HTML

Javascript

$(document).ready(function () {
    /*alert('success');*/
    $('nav a.mobile_menu').on('click', function () {

        var currentNavHeight = $('nav').height();

        if (currentNavHeight < 33) {

            var newNavHeight = $('nav > ul').height() + 15;
            $('nav').animate({ 'height': newNavHeight + 'px' }, 750);

        } else {

            $('nav').animate({ 'height': '0px' }, 750);

        }

    });

});

$（文档）.ready（函数（）{
/*警惕（“成功”）*/
$（'nav a.mobile_menu'）。在（'click'，函数（）{
var currentNavHeight=$（'nav'）.height（）；
如果（当前导航高度<33）{
var newNavHeight=$（'nav>ul'）。height（）+15；
$（'nav'）.animate（{'height'：newNavHeight+'px'}，750）；
}否则{
$（'nav'）.animate（{'height'：'0px'}，750）；
}
});
});

请原谅上面的大量代码，希望不要遗漏一些重要的内容

---

预期的结果应该是，当屏幕为800px时，菜单应该折叠为一个汉堡菜单按钮（该部分工作），然后在单击不工作的按钮时打开和关闭。

嘿，您的代码是正确的，但您的代码行是正确的

它不起作用。 而不是这个 用这个

$（文档）.ready（函数（）{
/*警惕（“成功”）*/
$（'nav'）。在（'click'，函数（）{
var currentNavHeight=$（'nav'）.height（）；
如果（当前导航高度<33）{
var newNavHeight=$（'nav>ul'）。height（）+15；
$（'nav'）.animate（{'height'：newNavHeight+'px'}，750）；
}否则{
$（'nav'）.animate（{'height'：'0px'}，750）；
}
});

}))

---

在这段代码中，通过单击导航栏，它可以打开和关闭。

嘿，您的代码是正确的，但您的代码行是正确的

它不起作用。 而不是这个 用这个

$（文档）.ready（函数（）{
/*警惕（“成功”）*/
$（'nav'）。在（'click'，函数（）{
var currentNavHeight=$（'nav'）.height（）；
如果（当前导航高度<33）{
var newNavHeight=$（'nav>ul'）。height（）+15；
$（'nav'）.animate（{'height'：newNavHeight+'px'}，750）；
}否则{
$（'nav'）.animate（{'height'：'0px'}，750）；
}
});

}))

---

在这段代码中，通过单击导航栏，它可以打开和关闭。

您的代码工作正常，但您可能希望使锚定更加可见，而不是

，您可以向锚定添加一些文本：

。在这里，您可以看到您的代码工作正常：

$（文档）.ready（函数（）{
/*警惕（“成功”）*/
$（'nav a.mobile_menu'）。在（'click'，function（）上{
var currentNavHeight=$（'nav'）.height（）；
如果（当前导航高度<33）{
var newNavHeight=$（'nav>ul'）。height（）+15；
$（'nav'）。设置动画({
“高度”：newNavHeight+“px”
}, 750);
}否则{
$（'nav'）。设置动画({
“高度”：“0px”
}, 750);
}
});
});
nav{
高度：40px；
线高：.8em；
边际上限：0；
背景色：RGB（150,20,7）；
颜色：RGB（250245239）；
位置：相对位置；
填充：5px0px 0px 25px；
}
导航ul：：之后{
内容：''；
显示：块；
明确：两者皆有；
}
导航a.mobile_菜单{
宽度：35px；
高度：32px；
背景：url（../Images/icon_menu.svg）不重复0；
背景尺寸：包含；
位置：绝对位置；
前22px；
左边距：10px；
显示：无；
}
导航ul{
列表样式：无；
保证金：0；
填充：0
}
nav ul li:悬停{
背景色：RGB（181,89,81,8）；
}
导航ul li：悬停>ul{
显示：块；
}
海军ulli a{
显示：内联块；
颜色：RGB（250245239）；
填充：10px 20px；
文字装饰：无；
宽度：自动；
位置：相对位置；
}
导航ulli a：悬停{
背景色：RGB（181,89,81）；
}
导航ul{
显示：无；
位置：绝对位置；
最高：100%；
背景色：RGB（181,89,81,8）；
}
李国宝{
位置：相对位置；
}
导航ul{
左：100%；
排名：0；
}
/*顶级菜单文本*/
导航>ul{
左侧填充：5px；
}
导航>ul>li{
浮动：左
}
导航>ul>li>a{
填充：10px 20px 15px 20px；
宽度：自动；
}
@媒体屏幕和屏幕（最大宽度：800px）{
导航{
高度：30px；
溢出：隐藏；
填充：3px0px 3px0px；
}
导航a{
文字装饰：无；
}
导航a.mobile_菜单{
显示：块；
}
/*导航a.mobile_菜单：：之后{
线高：1.9em；
利润率：0.35px；
颜色：RGB（250245239）；
内容：“菜单”；
}*/
美国海军，
海军，
导航ul{
显示：块；
位置：静态；
}
导航>ul{
填充：0；
}
nav>ul>li：第一个孩子{
浮动：无；
利润上限：35px；
}
导航>ul>li{
浮动：无；
边缘顶部：10px；
}
nav ul li:悬停{
背景：无；
}
海军ulli a{
宽度：自动；
显示：块；
利润率：8px 10px；
填充：6px 15px 6px 2px；
边框底部：1px实心rgba（255、255、255、.25）；
}
导航ulli a：悬停{
背景色：rgba（255、255、255、.2）；
}
导航ul{
背景：无；
}
海军ulli a{
左边距：30px；
}
导航李a{
左边距：60像素；
}
}
































您的代码可以正常工作，但您可能希望使锚定更加可见，而不是

nav {
    height: 40px;
    line-height: .8em;
    margin-top: 0;
    background-color: RGB(150, 20, 7);
    color: RGB(250, 245, 239);
    position: relative;
    padding: 5px 0px 0px 25px;
}

nav ul::after {
    content: '';
    display: block;
    clear: both;
}

nav a.mobile_menu {
    width: 35px;
    height: 32px;
    background: url(../Images/icon_menu.svg) no-repeat 0 0;
    background-size: contain;
    position: absolute;
    top 22px;
    margin-left: 10px;
    display: none;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0
}

nav ul li:hover {
    background-color: RGB(181, 89, 81, .8);
}

nav ul li:hover > ul {
    display: block;
}

nav ul li a {
    display: inline-block;
    color: RGB(250, 245, 239);
    padding: 10px 20px;
    text-decoration: none;
    width: auto;
    position: relative;
}

nav ul li a:hover {
    background-color: RGB(181, 89, 81);
}

nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    background-color: RGB(181, 89, 81, .8);
}

nav ul ul li {
    position: relative;
}

nav ul ul ul {
    left: 100%;
    top: 0;
}

/*top level menu text*/
nav > ul {
    padding-left: 5px;
}

nav > ul > li {
    float: left
}

nav > ul > li > a {
    padding: 10px 20px 15px 20px;
    width: auto;
}

@media screen and (max-width: 800px) {
nav {
        height: 30px;
        overflow: hidden;
        padding: 3px 0px 3px 0px;
    }

    nav a {
        text-decoration: none;
    }

    nav a.mobile_menu {
        display: block;
    }

    /*nav a.mobile_menu::after {
        line-height: 1.9em;
        margin: 0 0 0 35px;
        color: RGB(250, 245, 239);
        content: "Menu";
    }*/

    nav ul,
    nav ul ul,
    nav ul ul ul {
        display: block;
        position: static;
    }

    nav > ul {
        padding: 0;
    }

    nav > ul > li:first-child {
        float: none;
        margin-top: 35px;
    }

    nav > ul > li {
        float: none;
        margin-top: 10px;
    }

    nav ul li:hover {
        background: none;
    }

    nav ul li a {
        width: auto;
        display: block;
        margin: 8px 10px;
        padding: 6px 15px 6px 2px;
        border-bottom: 1px solid rgba(255, 255, 255, .25);
    }

    nav ul li a:hover {
        background-color: rgba(255, 255, 255, .2);
    }

    nav ul ul {
        background: none;
    }

    nav ul ul li a {
        margin-left: 30px;
    }

    nav ul ul ul li a {
        margin-left: 60px;
    }
}

$(document).ready(function () {
    /*alert('success');*/
    $('nav a.mobile_menu').on('click', function () {

        var currentNavHeight = $('nav').height();

        if (currentNavHeight < 33) {

            var newNavHeight = $('nav > ul').height() + 15;
            $('nav').animate({ 'height': newNavHeight + 'px' }, 750);

        } else {

            $('nav').animate({ 'height': '0px' }, 750);

        }

    });

});

$(document).ready(function () {
/*alert('success');*/
$('nav').on('click', function () {

    var currentNavHeight = $('nav').height();

    if (currentNavHeight < 33) {

        var newNavHeight = $('nav > ul').height() + 15;
        $('nav').animate({ 'height': newNavHeight + 'px' }, 750);

    } else {

        $('nav').animate({ 'height': '0px' }, 750);

    }

});