切换 html/css 网站菜单中的菜单问题。 将 cursor 悬停在右侧的汉堡图标上时无法获取菜单

Question

当@media（最大宽度= 1200px）时，菜单中的切换按钮有问题。 即当我切换到切换按钮时，什么都没有出现。 请帮忙

我在 html 脚本中添加了引导程序 4.3。 我想添加到我创建的切换按钮的菜单位于我的 html 脚本中的切换按钮下方。 请帮我解决这个问题

 ol, ul { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; } a:hover { text-decoration: none; } /********************************* *** Marque *********************************/.marquee { background: #2a4563; padding-top: 4px; padding-bottom: 3px; /*border: 1px; border-left: 10px; border-style: solid; border-color: #FF5733;*/ }.marquee a { color: white; text-decoration: none; font-size: 18px; line-height: 1.5; } /********************************* *** Logo Bar *********************************/ #logo-bar { background: #fff; padding-top: 3px; } #logo-bar.logo { display: flex; align-items: center; } #logo-bar.logo img { max-width: 280px; } #logo-bar.logo-2 img { max-width: 200px; margin-left: 70px; } #menu { background: #2a4563; box-shadow: 0 5px 3px -3px; position: relative; z-index: 1; } #menu ul { text-align: center; margin-bottom: 0; } #menu ul li { display: inline-block; padding: 8px 20px; } #menu ul li:hover, .active { background-color: orange; transition: ease-in.3s; } #menu ul li a { color: #fff; text-decoration: none; font-size: 18px; } #menu ul li:hover a { color: black; transition: ease-in.3s; } #menu ul li ul { display: none; position: absolute; padding: 10px; background: orange; } #menu ul li:hover ul { display: block; margin-top: 10px; margin-left: -20px; z-index: 1; padding: 10px; } #menu ul li ul li { display: block; } #menu ul li ul li ul.nav-sub-sub-item{ display: none; position: absolute; padding: 10px; background: orange; } #menu ul li:hover ul li:hover ul.nav-sub-sub-item { width: 100%; display: block; margin-top: -35px; margin-left: 200px; z-index: 1; padding: 10px; } #menu ul li ul li:hover { background: #2a4563; transition: ease-in.3s; } #menu ul li ul li:hover a { color: #fff; transition: ease-in.3s; } label { font-size: 26px; line-height: 70px; display: none; } #toggle { display: none; }.mobile-menu { display: none; } /* Media Queries for Hamburger Menu */ @media only screen and (max-width: 1200px) {.logo-bar { display: none; }.mobile-menu { display: block; padding: 5px 0 5px; box-shadow: 0 0 5px 0; position: relative; z-index: 1; }.mobile-menu-1 { padding: 0 0 0 50px; }.mobile-menu-1 img { max-width: 200px; } label { display: block; pointer: cursor; } #menu ul li { display: none; width: 100%; text-align: center; } #menu ul li a { display: block; border-bottom: 1px solid #EAEAEB; margin: 0; } #toggle:checked+#menu { display: block; } }

 <:doctype html> <html lang="en"> <head> <.-- Required meta tags --> <meta charset="utf-8"> <.-- Bootstrap CSS --> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap:min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <.-- Home Style Sheet --> <link rel="stylesheet" href="css/style?css" /> <:-- Font Awesome JavaScript --> <link href="https.//fonts.googleapis.com/css,family=Lato|Libre+Baskerville|Montserrat|Quicksand|Raleway|Slabo+27px&display=swap" rel="stylesheet"> <.-- Font Awesome JavaScript --> <script src="https,//kit:fontawesome.com/0412137e5c.js" crossorigin="anonymous"></script> <.-- Optional JavaScript --> <.-- jQuery first. then Popper.js. then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min:js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min:js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min:js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src='http;//ajax.aspnetcdn;com/ajax/jQuery/jquery-3;2.1;js'></script> <script src='script/script:js' type="text/javascript"></script> <title>Sample Website</title> </head> <body> <:-- Header --> <.-- Marquee Starts --> <div class="marquee"> <marquee behavior="scroll" scrollamount="4" direction="left" class="marqueeStyle" onmouseover="this;stop()." onmouseout="this.start()."> <a href="#" target="_blank"><i class="fas fa-newspaper"></i> Everything will remain closed upto 30th May 2020 to avoid gathering &amp. prevention of spreading Novel Corona Virus </a> </marquee> </div> <.-- Marquee Ends--> <.-- Logo Bar Starts --> <header class="header"> <div id="logo-bar"> <div class="container"> <div class="logo-bar"> <div class="row"> <div class="logo col-lg-6 col-md-6"> <a href="index.html"> <h1>LOGO</h1> </a> </div> <div class="logo-2 col-lg-3 col-md-3"> <h1>@2ND LOGO</h1> </div> <div class="col-lg-3 col-md-3"> <button class="btn btn-sm btn-primary">Student Login</button>&nbsp.<button class="btn btn-sm btn-primary">Admin Login</button> <h6><strong>Call Us.</strong> +41-320-00000000</h6> <h6><Strong>Email Us.</Strong></h6> <h6>info@example.com</h6> </div> </div> </div> </div> </div> <div class="mobile-menu"> <div class="row"> <div class="mobile-menu-1 col-10 d-flex my-auto"> <h1>Mobile LOGO</h1> </div> <div class="mobile-menu-2 col-2 d-flex my-auto"> <label for="toggle">&#9776.</label> <input type="checkbox" id="toggle" /> </div> </div> </div> <.-- Logo Bar Ends --> <.-- Menu Bar Starts --> <div id="menu"> <div class="container"> <ul> <li class="active"><a href="index.html"><i class="fas fa-home"></i> </a></li> <li class="nav-item"><a href="#.">About Us</a> <ul> <li class="nav-sub-item"><a href="about.html">About TGU</a></li> <li class="nav-sub-item"><a href="vision.html">TGU Vision</a></li> <li class="nav-sub-item"><a href="mission.html">TGU Mission</a></li> <li class="nav-sub-item"><a href="board.html">Board of Mgt.</a></li> <li class="nav-sub-item"><a href="#.">Approval & Affiliation</a> <ul class="nav-sub-sub-item"> <li class="nav-sub-item"><a href="pdf/tgu-act.pdf" target="_blank">TGU Act</a></li> <li class="nav-sub-item"><a href="pdf/UGC-consolidated-list.pdf" target="_blank">UGC List</a></li> </ul> </li> </ul> </li> <li class="nav-item"><a href="#!">Academic</a> <ul> <li class="nav-sub-item"><a href="department.html">Department</a></li> <li class="nav-sub-item"><a href="course.html">Courses</a></li> <li class="nav-sub-item"><a href="syllabus.html">Syllabus</a></li> </ul> </li> <li class="nav-item"><a href="#!">Admission</a> <ul> <li class="nav-sub-item"><a href="procedure">Procedure</a></li> <li class="nav-sub-item"><a href="applyonline.html">Apply Online</a></li> <li class="nav-sub-item"><a href="scholarship.html">Scholarship</a></li> <li class="nav-sub-item"><a href="download.html">Download Form</a></li> <li class="nav-sub-item"><a href="merit.html">Merit</a></li> </ul> </li> <li class="nav-item"><a href="#!">Examination</a> <ul> <li class="nav-sub-item"><a href="examform.html">Exam Form</a></li> <li class="nav-sub-item"><a href="examnotice.html">Exam Notice</a></li> <li class="nav-sub-item"><a href="admitcard.html">Admit Card</a></li> <li class="nav-sub-item"><a href="verification.html">Verification</a></li> </ul> </li> <li class="nav-item"><a href="research.html">Research</a></li> <li class="nav-item"><a href="facilities.html">Facilities</a> <ul> <li class="nav-sub-item"><a href="#!">Library</a></li> <li class="nav-sub-item"><a href="#!">WiFi Campus</a></li> <li class="nav-sub-item"><a href="#!">Hostel & Cafe</a></li> <li class="nav-sub-item"><a href="#!">Digitalization</a></li> <li class="nav-sub-item"><a href="#!">First Aid</a></li> <li class="nav-sub-item"><a href="#!">Sports</a></li> </ul> </li> <li><a href="contact.html">Contact</a></li> <li> <div class="search_button"><i class="fa fa-search" aria-hidden="true"></i></div> </li> </ul> </div> </div> </header> <!-- Menu Bar Ends -->

Answer 1

您正在使用表单复选框来创建切换逻辑，这不是对 HTMl 标记的有效使用。 您应该做的是将 JS 逻辑添加到 div 元素mobile-menu-2以绑定添加单击事件处理程序。

HTML

<div class="mobile-menu-2 col-2 d-flex my-auto">&#9776;</div>

JS

var mobileMenu = document.getElementsByClassName("mobile-menu-2")[0];
//Add click event with a callback function to toggle class style
mobileMenu.addEventListener("click", toggleMenu);

function toggleMenu() {
  var activeMenu = mobileMenu.classList.contains("active");
  if (!activeMenu) {     
    mobileMenu.classList.add("active");
  } else {
    mobileMenu.classList.remove("active");
  }
}

因此，这将在您的名为 active 的 div 元素上添加和删除 class。 因此，现在在您的 CSS 中，您只需确保将正确的 styles 应用于您所定位的 class。

示例 CSS

.mobile-menu-2 {
  background-color: red;
}

.mobile-menu-2.active {
  background-color: green;
}

如果您需要在另一个 div 上添加/删除活动的 state class，您只需定位该新元素document.getElementsByClassName('something')[0]并将 ZA2F2ED4F8EBC0664C21A29D 元素添加/删除即可。