在移动视图中，当用户点击链接时，如何关闭此导航栏？-PHP中文网问答

当用户点击链接浏览网站时，导航栏没有关闭？

我曾尝试向每个链接添加单击事件侦听器以关闭导航栏，但它不起作用！此外，处于活动位置（即 X）的 hamberberger 菜单图标也没有很好地对齐。但主要问题是点击时导航栏会折叠。

$(document).ready(function() { $('.container').click(function() { $('.navbar .menu').toggleClass("active"); }); }); function myFunction(x) { x.classList.toggle("change"); }

@media (max-width: 1104px) { .about .about-content .left img { height: 350px; width: 350px; } } @media (max-width: 991px) { .max-width { padding: 0 50px; } } @media (max-width: 947px) { .menu-btn { display: block; z-index: 999; } /* .menu-btn i.active:before { content: "\f00d"; } */ .navbar .menu { position: fixed; height: 100vh; width: 100%; left: -100%; top: 0; background: #111; text-align: center; padding-top: 80px; transition: all 0.3s ease; } .navbar .menu.active { left: 0; } .navbar .menu li { display: block; } .navbar .menu li a { font-family: 'Josefin Sans', sans-serif; display: inline-block; margin: 20px 0; font-size: 25px; } } .navbar { position: fixed; width: 100%; z-index: 999; padding: 30px 0; font-family: 'Ubuntu', sans-serif; transition: all 0.3s ease; } .navbar.sticky { padding: 15px 0; background: crimson; } .navbar .max-width { display: flex; align-items: center; justify-content: space-between; } .navbar .logo a { position: relative; color: #fff; font-size: 35px; font-weight: bold; text-transform: uppercase; font-family: 'Orbitron', sans-serif; border: 3px solid #fff; padding: 0px 10px; text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); letter-spacing: 2px; } .navbar .logo a::after { content: 'PANDEY'; position: absolute; font-size: 15px; font-weight: bold; bottom: -12px; /* color: crimson; */ right: 15px; background: crimson; border-radius: 5px; /* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */ padding: 0px 4px; letter-spacing: 2px; } .navbar .logo a span { color: crimson; transition: all 0.3s ease; } .navbar.sticky .logo a::after { border-radius: 4px; background: #fff; color: crimson; text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9); } .container { display: inline-block; cursor: pointer; box-sizing: border-box; } .bar1 { width: 35px; height: 3px; background-color: #fff; margin: 6px 0; transition: 0.4s; } .bar2 { width: 25px; height: 3px; background-color: #fff; margin: 6px 0; transition: 0.4s; } .bar3 { width: 15px; height: 3px; background-color: #fff; margin: 6px 0; transition: 0.4s; } .change .bar1 { transform: translate(0, 11px) rotate(-45deg); } .change .bar2 { opacity: 0; } .change .bar3 { transform: translate(0, -6px) rotate(40deg); width: 35px; } .navbar.sticky .logo a span { color: #fff; } .navbar .menu li { list-style: none; display: inline-block; } .navbar .menu li a { font-family: 'Josefin Sans', sans-serif; display: block; color: #fff; font-size: 18px; font-weight: 500; margin-left: 25px; transition: color 0.3s ease; } .navbar .menu li a:hover { position: relative; color: #fff; } .navbar.sticky .menu li a:hover { color: #fff; }

   Chhailbihari
  Home
 About
 Services
 Skills
 Contact

body { margin: 0; padding: 0; background: blue; color: #cdcdcd; } #togglmenu { display: block; position: relative; top: 50px; left: 50px; z-index: 1; -webkit-user-select: none; user-select: none; } #togglmenu a { text-decoration: none; color: #232323; transition: color 0.3s ease; } #togglmenu a:hover { color: tomato; } #togglmenu input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none; } #togglmenu span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #cdcdcd; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; } #togglmenu span:first-child { transform-origin: 0% 0%; } #togglmenu span:nth-last-child(2) { transform-origin: 0% 100%; } #togglmenu input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #232323; } #togglmenu input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } #togglmenu input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } #menu { position: absolute; width: 300px; margin: -100px 0 0 -50px; padding: 50px; padding-top: 125px; background: #ededed; list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); } #menu li { padding: 10px 0; font-size: 22px; } #togglmenu input:checked ~ ul { transform: none; }