用于较小屏幕（包括JavaScript/jQuery）的汉堡包菜单_Javascript_Jquery_Html_Navigation Drawer_Hamburger Menu

用于较小屏幕（包括JavaScript/jQuery）的汉堡包菜单

javascript jquery html

用于较小屏幕（包括JavaScript/jQuery）的汉堡包菜单,javascript,jquery,html,navigation-drawer,hamburger-menu,Javascript,Jquery,Html,Navigation Drawer,Hamburger Menu,我已经做了响应菜单。在桌面上，导航水平显示在标题中：主页、图库、关于等。对于较小的屏幕，我制作了汉堡包图标，单击后，导航应展开。使用CSS，我在较小的屏幕上隐藏了导航，并对其展开时的外观进行了样式化—它将垂直显示使用javascript，我创建了一个函数，当你点击汉堡图标时可以扩展导航，当你再次点击时可以折叠导航它起作用了问题是：如果我点击汉堡包图标显示导航，然后再次隐藏它，当我将浏览器窗口放大到桌面大小时，导航将不会在标题中再次水平显示，它将保持隐藏状态请帮忙 $（“#抽屉”）。单

我已经做了响应菜单。在桌面上，导航水平显示在标题中：主页、图库、关于等。对于较小的屏幕，我制作了汉堡包图标，单击后，导航应展开。使用CSS，我在较小的屏幕上隐藏了导航，并对其展开时的外观进行了样式化—它将垂直显示

使用javascript，我创建了一个函数，当你点击汉堡图标时可以扩展导航，当你再次点击时可以折叠导航

它起作用了

问题是：如果我点击汉堡包图标显示导航，然后再次隐藏它，当我将浏览器窗口放大到桌面大小时，导航将不会在标题中再次水平显示，它将保持隐藏状态

请帮忙

$（“#抽屉”）。单击（函数（）{
$（'header nav'）。切换（1）；
if（$（this）.text（）=='Hide'）{
$（this.text（'Show'）；
}否则{
$（this.text（'Hide'）；
}
});
#抽屉{
显示：无；
}
标题导航{
浮动：对；
}
李海军{
浮动：左；
}
@媒体屏幕和屏幕（最大宽度：768px）{
#抽屉{
显示：内联块；
浮动：对；
}
标题导航{
显示：无；
浮动：无；
填充顶部：120px；
/*汉堡图标位于右侧的标题中，导航在汉堡图标下方的屏幕中心垂直展开，这就是为什么我将填充物放在120px，使导航位于图标下方*/
文本对齐：居中；
}
李海军{
浮动：无；
}
李娜{
显示：内联块；
左边距：0px；
边缘顶部：10px；
}







你是我在这里帮助的第一个人，所以我希望我能说清楚这一点，这对我有实际的帮助
我相信您的问题在于toggle（）的使用。此函数将向nav元素添加内联样式，如果不使用！important，就无法用CSS覆盖这些样式
我使用toggleClass（）组合了一个解决方案它不会添加任何内联样式，而是应用一个类来显示您的导航元素，同时仍然允许使用媒体查询的相反效果进行覆盖。我还想补充一点，我并不真正建议使用纯显示：块的类，但它说明了这一点
<!DOCTYPE html>
<html>
    <head>
        <script
            src="http://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
        <style>
            #drawer {
                display: none;
            }

            header nav {
                float: right;
            }

            nav li {
                float: left;
            }

            @media screen and (max-width: 768px) {
                #drawer {
                    display: inline-block;
                    float: right;
                }

                header nav {
                    display: none;
                    float: none;
                    padding-top: 120px; /* Hamburger icon is in the header on the right side, and nav expands vertically in the center of the screen below the hamburger icon, that's why I put the padding 120px, to make nav below the icon*/
                    text-align: center;
                }

                nav li {
                    float: none;
                }  

                nav li a {
                    display: inline-block;
                    margin-left: 0px;
                    margin-top: 10px;
                }
            }

            .display {
                display: block;
            }
        </style>
    </head>
<body>
    <header>
    <img id="drawer" src="images/drawer.png" alt="Drawer">
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="tutorials.html">Tutorials</a></li>
        </ul>
    </nav>
    </header>
    <script>
        $('#drawer').click(function() {
            $('header nav').toggleClass('display');

            if( $(this).text() == 'Hide' ) {

                $(this).text('Show');

            } else {
                $(this).text('Hide');

            }
        });
    </script>
</body>
</html>


#抽屉{
显示：无；
}
标题导航{
浮动：对；
}
李海军{
浮动：左；
}
@媒体屏幕和屏幕（最大宽度：768px）{
#抽屉{
显示：内联块；
浮动：对；
}
标题导航{
显示：无；
浮动：无；
顶部填充：120px；/*汉堡包图标位于右侧的标题中，导航在汉堡包图标下方的屏幕中心垂直展开，这就是为什么我将填充设置为120px，以使导航位于图标下方*/
文本对齐：居中；
}
李海军{
浮动：无；
}  
李娜{
显示：内联块；
左边距：0px；
边缘顶部：10px；
}
}
.展示{
显示：块；
}






$（“#抽屉”）。单击（函数（）{
$（'header nav'）。toggleClass（'display'）；
if（$（this）.text（）=='Hide'）{
$（this.text（'Show'）；
}否则{
$（this.text（'Hide'）；
}
});

我希望这是有用的，谢谢你做我的实验品。
没问题！非常乐意帮忙！