如何解決 jquery 下拉問題？
[英]How can I solve the jquery dropdown problem?
問題描述
我想不通，因為它在 javascript 上不是很好。當我點擊漢堡包菜單中的服務時，我希望下拉菜單打開，但每當我點擊服務時，它會快速打開和關閉。 它是 jQuery 還是普通腳本都沒關系。 第二個問題是打開漢堡包菜單時。 我希望下拉菜單下的“lorem”到 go 而不是留在它下面。 先感謝您。 祝你有美好的一天。
$(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 個解決方案
解決方案1
3 已采納 2020-12-07 00:11:21
這是正常的，它需要像這樣，快速打開和關閉背后的原因是你點擊了一個鏈接，瀏覽器試圖跟隨它，並且由於鏈接沒有href屬性，它最終重新加載頁面.
所以這里有一個快速簡單的修復方法是防止這種情況發生，幸運的是JavaScript允許我們阻止幾乎所有事件，並且可以通過調用傳遞給偵聽器的event object 的preventDefault方法來阻止click事件（你沒有傳遞).
請參閱下面的更新代碼。
$(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>
如何在JQuery中解決此問題？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.