适用于小屏幕的汉堡菜单，包括 JavaScript/jQuery答案

【问题标题】：Hamburger menu for smaller screens including JavaScript/jQuery适用于小屏幕的汉堡菜单，包括 JavaScript/jQuery
【发布时间】：2018-02-24 11:36:58
【问题描述】：

我制作了响应式菜单。在桌面上，导航在标题中水平显示：主页、画廊、关于等。对于较小的屏幕，我制作了汉堡图标，点击时，导航应该会展开。使用 CSS，我在较小的屏幕上隐藏了导航，并设计了它在展开时的外观 - 它将垂直显示。

使用 javascript，我创建了一个功能，可以在您单击汉堡图标时展开导航，并在您再次单击时将其折叠。

有效。

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

请帮忙！

$('#drawer').click(function() {
  $('header nav').toggle(1);
  if ($(this).text() == 'Hide') {
    $(this).text('Show');
  } else {
    $(this).text('Hide');
  }
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【问题讨论】：

标签： javascript jquery html navigation-drawer hamburger-menu

【解决方案1】：

你是我在这里帮助过的第一个人，所以我希望我把这一点说清楚，这对你有实际帮助。

我相信您的问题在于使用切换（）。此函数将为您的导航元素添加内联样式，如果不使用 !important，这些样式是无法用 CSS 覆盖的。

我已经使用 toggleClass() 组合了一个解决方案，它不会添加任何内联样式，而是应用一个类来显示您的导航元素，同时仍然允许使用您的媒体查询的相反效果进行覆盖。我还想补充一点，我真的不建议使用纯粹执行 display: 块的类，但它说明了这一点。

<!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>

我希望这是有用的，感谢你成为我的 stackoverflow 豚鼠。

【讨论】：

没问题！真的很高兴能提供帮助！