stackoom
  简体   繁体   中英

How can I solve the jquery dropdown problem?

 原文  2020-12-06 23:32:35  1   1    javascript/ html/ jquery/ css/ navbar

Question

I can't figure it out as it's not very good at javascript. When I click on the services in the hamburger menu, I want the dropdown to open, but whenever I click on the services, it quickly turns on and off. It doesn't matter if it's jQuery or vanilla script. A second problem is when the hamburger menu is opened. I want "lorem" to go under the drop-down menu rather than stay under it. Thank you in advance. Have a good day. 

 $(function () { $(".hamburger-menu").on("click", function () { if ($(".nav-list").hasClass("active")) { $(".nav-list").removeClass("active"); } else { $(".nav-list").addClass("active"); } }) }); $(function () { $(".dropdown-menu").on("click", function () { if ($(".mini-menu").hasClass("active2")) { $(".mini-menu").removeClass("active2"); } else { $(".mini-menu").addClass("active2"); } }) });
 * { padding: 0px; margin: 0px; box-sizing: border-box; } html { font-family: 'Playfair Display', serif; font-weight: 400; }:root { --bg-color: #302b63; --hover-color: #0f0c29; } ul { list-style: none; } a { text-decoration: none; color: black; } #top-bar { position: fixed; width: 100%; height: 80px; top: 0px; background: var(--bg-color); }.container { max-width: 1300px; height: 100%; margin: 0 auto; }.flex { position: relative; display: flex; align-items: center; justify-content: space-between; } #contain { position: absolute; top: 100%; width: 100%; justify-content: flex-end; }.nav-list { background: var(--bg-color); width: 100%; padding: 1rem; display: none; }.nav-list.active { display: block; }.item { padding-bottom: 1rem; display: flex; flex-direction: column; }.mini-menu{ margin-top: 1rem; display: none; }.mini-menu.active2{ display: inline-block; }.item i { position: absolute; margin-left: 4.2rem; }.item a { display: inline-block; width: 100%; }.item:hover { background: }.item a:hover { color: #D4AF37; }.hamburger-menu { border: 1px solid white; padding: 1rem 0.4rem; display: flex; cursor: pointer; }.bars { position: relative; display: inline-block; width: 20px; height: 2px; background: white; }.bars::before, .bars::after { position: absolute; content: ''; width: 20px; height: 2px; background: white; }.lorem { margin-top: 6rem; }.bars::before { transform: translateY(-7px); }.bars::after { transform: translateY(7px); }
 <.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="master:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min,css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous"/> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Playfair+Display;wght@400:500&display=swap" rel="stylesheet"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min,js"></script> </head> <body> <header id="top-bar"> <div class="container flex"> <h1 class="logo">Logo</h1> <div class="hamburger-menu"> <span class="bars"></span></div> <nav id="contain"> <ul class="nav-list"> <li class="item"> <a href="">Home</a> </li> <li class="item dropdown-menu"> <a href="">Services</a> <ul class="mini-menu"> <li class="mini-item"><a href="">Front-End Developement</a></li> <li class="mini-item"><a href="">Back-End Developement</a></li> <li class="mini-item"><a href="">Full-Stack Developement</a></li> <li class="mini-item"><a href="">WordPress Developement</a></li> </ul> </li> <li class="item"> <a href="">Portfolio</a> </li> <li class="item"> <a href="">Articles</a> </li> <li class="item"> <a href="">Contact</a> </li> </ul> </nav> </div> </header> <div class="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum, Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <script src="api.js"></script> </body> </html>

1 answers

solution1
 3 ACCPTED  2020-12-07 00:11:21

This is normal, and it needs to be like so, The reason behind the fast on and off is that you're clicking a link and the browser tries to follow it, and since the link has no href attribute it end up reloading the page.

So a quick and a simple fix here is to prevent that from happening, luckily JavaScript allows us to prevent almost all the events and click event can be prevented by calling preventDefault method of the event object passed to the listener(which you didn't pass).

See updated code below. 

 $(function () { $(".hamburger-menu").on("click", function () { if ($(".nav-list").hasClass("active")) { $(".nav-list").removeClass("active"); } else { $(".nav-list").addClass("active"); } }) }); $(function () { $(".dropdown-menu").on("click", function (e) { // "e" is the click event object passed to your listener // simply, add this line to prevent default anchor click behavior e.preventDefault(); if ($(".mini-menu").hasClass("active2")) { $(".mini-menu").removeClass("active2"); } else { $(".mini-menu").addClass("active2"); } }) });
 * { padding: 0px; margin: 0px; box-sizing: border-box; } html { font-family: 'Playfair Display', serif; font-weight: 400; }:root { --bg-color: #302b63; --hover-color: #0f0c29; } ul { list-style: none; } a { text-decoration: none; color: black; } #top-bar { position: fixed; width: 100%; height: 80px; top: 0px; background: var(--bg-color); }.container { max-width: 1300px; height: 100%; margin: 0 auto; }.flex { position: relative; display: flex; align-items: center; justify-content: space-between; } #contain { position: absolute; top: 100%; width: 100%; justify-content: flex-end; }.nav-list { background: var(--bg-color); width: 100%; padding: 1rem; display: none; }.nav-list.active { display: block; }.item { padding-bottom: 1rem; display: flex; flex-direction: column; }.mini-menu{ margin-top: 1rem; display: none; }.mini-menu.active2{ display: inline-block; }.item i { position: absolute; margin-left: 4.2rem; }.item a { display: inline-block; width: 100%; }.item:hover { background: }.item a:hover { color: #D4AF37; }.hamburger-menu { border: 1px solid white; padding: 1rem 0.4rem; display: flex; cursor: pointer; }.bars { position: relative; display: inline-block; width: 20px; height: 2px; background: white; }.bars::before, .bars::after { position: absolute; content: ''; width: 20px; height: 2px; background: white; }.lorem { margin-top: 6rem; }.bars::before { transform: translateY(-7px); }.bars::after { transform: translateY(7px); }
 <.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="master:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min,css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous"/> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="preconnect" href="https.//fonts.gstatic:com"> <link href="https.//fonts.googleapis?com/css2:family=Playfair+Display;wght@400:500&display=swap" rel="stylesheet"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min,js"></script> </head> <body> <header id="top-bar"> <div class="container flex"> <h1 class="logo">Logo</h1> <div class="hamburger-menu"> <span class="bars"></span></div> <nav id="contain"> <ul class="nav-list"> <li class="item"> <a href="">Home</a> </li> <li class="item dropdown-menu"> <a href="">Services</a> <ul class="mini-menu"> <li class="mini-item"><a href="">Front-End Developement</a></li> <li class="mini-item"><a href="">Back-End Developement</a></li> <li class="mini-item"><a href="">Full-Stack Developement</a></li> <li class="mini-item"><a href="">WordPress Developement</a></li> </ul> </li> <li class="item"> <a href="">Portfolio</a> </li> <li class="item"> <a href="">Articles</a> </li> <li class="item"> <a href="">Contact</a> </li> </ul> </nav> </div> </header> <div class="lorem">Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum, Lorem ipsum dolor sit amet, consectetur adipisicing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</div> <script src="api.js"></script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How do I solve this problem in JQuery? jQuery Problem - How to solve? How can I solve the problem of NaN value? Dropzone is not working, How can i solve this problem How can I solve this String length problem? How can I solve the Marquee stumble problem? How can I solve the problem with forwarding messages? How i can solve the devServer problem in webpack? How can I solve this trigonometric problem How can I solve this problem with Javascript?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM