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

Question

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

使用 javascript 我制作了一个功能，当您点击汉堡包图标时展开导航并在您再次点击时折叠它。

有效。

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

请帮忙！

$('#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>

Answer 1

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

我认为您的问题出在 toggle() 的使用上。此函数将向您的导航元素添加内联样式，如果不使用 !important.

，则无法使用 CSS 覆盖这些样式

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

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

我希望这是有用的，感谢你成为我的 Whosebug 小白鼠。

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

Hamburger menu for smaller screens including JavaScript/jQuery

html

javascript

jquery

navigation-drawer

hamburger-menu