從 hover 到 onclick 的下拉菜單
[英]Dropdown menu from hover to onclick
問題描述
如何將以下子導航菜單從 hover 轉換為點擊 j-query？ 在示例中，我添加了一個活動的 class 並使用 j-query 來顯示子導航，但是在用戶單擊它后它會消失。
https://codepen.io/patriciaworth/pen/bGGMBow
我按照此網頁上的說明無濟於事。
HTML
<!DOCTYPE html>
<html>
<head>
<title>Liive Real Estate</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
Liive
</div>
<div class="toggle">☰</div>
<div class="panel">
<div class="links">
<ul>
<li><a href="">Home</a></li>
<li>
<a href="">Property</a>
<ul>
<li><a href="">bla bla</a></li>
<li><a href="">bla bla</a></li>
<li><a href="">bla bla</a></li>
<li><a href="">bla bla</a></li>
<li><a href="">bla bla</a></li>
</ul>
</li>
<li>
<a href="">Agents</a>
<ul>
<li><a href="">bla bla</a></li>
<li><a href="">bla bla</a></li>
<li><a href="">bla bla</a></li>
<li><a href="">bla bla</a></li>
<li><a href="">bla bla</a></li>
</ul>
</li>
<li><a href="">Pages</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="signup">
<button>Signup</button>
</div>
</div>
</nav>
</body>
</html>
SCSS
/*reset*/
*
{
margin: 0;
padding:0;
list-style-type: none;
border: none;
text-decoration: none;
}
html
{
width:100%;
min-width: 320px;
max-width: 1920px;
margin: 0 auto;
background: #ccc;
}
//colors
$purple: #a491d3;
$blue-grey: #818aa3;
$light-green:#c5dca0;
$cream: #f5f2b8;
//fonts
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');
$heading-font: 'Poppins', sans-serif;
$page-font: 'Roboto', sans-serif;
//breakpoints
$tiny: 576px;
$small: 768px;
$medium: 992px;
$large: 1200px;
.panel
{
display: block;
}
.navbar
{
background: #fff;
box-sizing: border-box;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: $heading-font;
padding: 0 20px;
@media screen and (max-width: $medium)
{
display: block;
padding: 0;
}
.logo
{
flex:1;
text-align: left;
font-size: 22px;
color: $purple;
font-weight: 500;
@media screen and (max-width: $medium)
{
display: block;
border-bottom: 1px solid $purple;
text-align: left;
padding: 20px;
}
}
.toggle
{
display: none;
@media screen and (max-width: $medium)
{
display: block;
position: absolute;
top: 20px;
right:20px;
font-family: $heading-font;
color: #000;
font-size: 18px;
cursor: pointer;
}
}
.panel
{
flex: 7;
display: flex;
align-items: center;
justify-content: center;
@media screen and (max-width: $medium)
{
display: none;
}
.links
{
flex:6;
text-align: center;
font-size: 16px;
line-height: 25px;
}
}
ul
{
display: block;
width: 100%;
@media screen and (max-width: $medium)
{
padding: 20px 0;
}
}
li
{
display: inline-block;
@media screen and (max-width: $medium)
{
display: block;
}
}
ul li a
{
transition: 0.5s;
color: #000;
padding: 20px 10px;
display: block;
text-decoration: none;
@media screen and (max-width: $medium)
{
padding:5px 0;
}
}
ul li a:hover
{
background: $purple;
color: #fff;
}
ul li ul
{
width: 200px;
padding: 10px 20px;
box-sizing: border-box;
background: #333;
display: none;
position: absolute;
top: 65px;
@media screen and (max-width: $medium)
{
position: relative;
top:0;
width: 100%;
}
}
ul li ul li
{
display: block;
text-align: left;
@media screen and (max-width: $medium)
{
text-align: center;
}
a
{
font-size: 14px;
padding: 0;
color: #fff;
background: transparent !important;
&:hover
{
color: $purple;
background: transparent !important;
}
}
}
ul li:hover ul
{
display: block;
}
ul li:hover a
{
background: $purple;
color: #fff;
}
/*THIS DOES NOT WORK*/
/*.active
{
display: block !important;
a
{
background: $purple;
color: #fff;
}
}*/
.signup
{
flex:1;
text-align: right;
button
{
border: 1px solid $purple;
padding: 10px 15px;
background: transparent;
font-size: 16px;
transition: 0.5s;
cursor: pointer;
&:hover
{
background: $purple;
color: #fff;
}
}
@media screen and (max-width: $medium)
{
text-align: center;
padding-bottom: 20px;
display: block;
}
}
}
JS
$(document).ready(function(){
$(".toggle").click(function(){
$("nav .panel").slideToggle();
});
/*THIS DOES NOT WORK*/
/*$("nav").on("click", "li", function(){
$(this).children("ul").toggleClass("active");
$("nav li").not(this).children("ul").removeClass("active");
});*/
});
2 個解決方案
解決方案1
1 已采納 2019-11-07 02:43:01
您可以直接將hover class 轉換為active class，然后單擊，切換活動 ZA2F2ED4F8EBC40AB4DZC21A291 找到下面的代碼片段並全屏查看，使其不受media-queries的影響。
另外，您需要包含href="#"否則它將重新加載頁面。
ul li.active ul {
display: block;
}
ul li.active a {
background: $purple;
color: #fff;
}
$(document).ready(function() { $(".toggle").click(function() { $("nav.panel").slideToggle(); }); $("nav").on("click", "li", function() { $('nav li.active').not(this).removeClass("active"); // remove previous selection $(this).toggleClass("active"); }); });
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap'); /*reset*/ * { margin: 0; padding: 0; list-style-type: none; border: none; text-decoration: none; } html { width: 100%; min-width: 320px; max-width: 1920px; margin: 0 auto; background: #ccc; }.panel { display: block; }.navbar { background: #fff; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; padding: 0 20px; /*THIS DOES NOT WORK*/ /*.active { display: block;important: a { background; $purple: color; #fff: } } */ } @media screen and (max-width. 992px) {:navbar { display; block: padding; 0. } }.navbar:logo { flex; 1: text-align; left: font-size; 22px: color; #a491d3: font-weight; 500: } @media screen and (max-width. 992px) {.navbar:logo { display; block: border-bottom; 1px solid #a491d3: text-align; left: padding; 20px. } }.navbar:toggle { display; none: } @media screen and (max-width. 992px) {.navbar:toggle { display; block: position; absolute: top; 20px: right; 20px: font-family, 'Poppins'; sans-serif: color; #000: font-size; 18px: cursor; pointer. } }.navbar:panel { flex; 7: display; flex: align-items; center: justify-content; center: } @media screen and (max-width. 992px) {.navbar:panel { display; none. } }.navbar.panel:links { flex; 6: text-align; center: font-size; 16px: line-height; 25px. }:navbar ul { display; block: width; 100%: } @media screen and (max-width. 992px) {:navbar ul { padding; 20px 0. } }:navbar li { display; inline-block: } @media screen and (max-width. 992px) {:navbar li { display; block. } }:navbar ul li a { transition. 0;5s: color; #000: padding; 20px 10px: display; block: text-decoration; none: } @media screen and (max-width. 992px) {:navbar ul li a { padding; 5px 0. } }:navbar ul li a:hover { background; #a491d3: color; #fff. }:navbar ul li ul { width; 200px: padding; 10px 20px: box-sizing; border-box: background; #333: display; none: position; absolute: top; 65px: } @media screen and (max-width. 992px) {:navbar ul li ul { position; relative: top; 0: width; 100%. } }:navbar ul li ul li { display; block: text-align; left: } @media screen and (max-width. 992px) {:navbar ul li ul li { text-align; center. } }:navbar ul li ul li a { font-size; 14px: padding; 0: color; #fff: background; transparent.important: }:navbar ul li ul li a;hover { color: #a491d3; background. transparent.important: };navbar ul li.active ul { display. block: };navbar ul li:active a { background; #a491d3. color. #fff: };navbar:signup { flex; 1. text-align. right: };navbar:signup button { border; 1px solid #a491d3: padding; 10px 15px: background; transparent: font-size. 16px; transition: 0;5s. cursor. pointer: }:navbar;signup button:hover { background; #a491d3: color. #fff. } @media screen and (max-width: 992px) {;navbar:signup { text-align; center: padding-bottom; 20px; display: block; } }
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <nav class="navbar"> <div class="logo"> Liive </div> <div class="toggle">☰</div> <div class="panel"> <div class="links"> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Property</a> <ul> <li><a href="#">bla bla</a></li> <li><a href="#">bla bla</a></li> <li><a href="#">bla bla</a></li> <li><a href="#">bla bla</a></li> <li><a href="#">bla bla</a></li> </ul> </li> <li> <a href="#">Agents</a> <ul> <li><a href="#">bla bla</a></li> <li><a href="#">bla bla</a></li> <li><a href="#">bla bla</a></li> <li><a href="#">bla bla</a></li> <li><a href="#">bla bla</a></li> </ul> </li> <li><a href="#">Pages</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="signup"> <button>Signup</button> </div> </div> </nav>
解決方案2
-1 2019-11-07 02:23:31
您可以搜索<a>標簽旁邊的直接兄弟元素，即<ul> ：
$('a+ul').click()
或搜索所有您可以深入了解的項目：
$('a+ul>li').click()
+即時西比林
>所有孩子
Gantry 5 Extended Style menu dropdown onclick to hover
[英]Gantry 5 Extended Style menu dropdown onclick to hover
將 Masterpage 從 hover 轉換為 onclick 以獲取下拉菜單
[英]Convert Masterpage from hover to onclick for the dropdown menus
onclick下拉菜單，后退為懸停，處理多個菜單項
[英]onclick dropdown menu with fallback to on hover, work on more than one menu item
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.