单击其他位置时关闭侧边菜单
Posted
技术标签:
【中文标题】单击其他位置时关闭侧边菜单【英文标题】:Close side menu when clicking elsewhere 【发布时间】:2020-03-27 13:35:26 【问题描述】:我有一个带有侧边菜单的项目,我正在尝试克隆 Google Clas-s-room。当您单击汉堡图标时,侧边菜单将从左侧出现。是否可以通过单击侧边菜单中排除的区域使其关闭或回到原来的位置?
为了清楚起见,我希望菜单在单击菜单之外的区域时关闭。
$(document).ready(function()
$('i.fa-bars').on('click', function()
$(this).toggleClass('active');
$('.side-menu').css(
'transform': 'translateX(0px)',
'box-shadow': '5px 5px 5px #ddd'
);
);
$('.plus').on('click', function()
$(this).toggleClass('active');
);
$('i.fa-th').on('click', function()
$(this).toggleClass('active');
);
$('.account').on('click', function()
$(this).toggleClass('active');
);
);
*
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
font-family: sans-serif;
color: black;
transition: .3s;
.nav_bar
border-bottom: 1px solid #dddddd;
display: flex;
justify-content: space-between;
line-height: 65px;
position: fixed;
width: 100%;
.nav_bar *
display: flex;
align-items: center;
.left ul,
.right ul
display: flex;
i.fa-bars
font-size: 20px;
color: #535353;
padding: 10px;
border-radius: 50%;
margin: 0 0px 0 15px;
i.fa-bars:hover
background-color: #f8f8f8;
.fa-bars.active
background-color: #d6d6d6dd;
.fa-bars.active:hover
background-color: #d6d6d6dd;
.google-icon
cursor: default;
transform: translateY(1px) translateX(4px);
.clas-s-room
font-size: 22px;
cursor: text;
color: #353535;
.plus
width: 20px;
padding: 10px;
border-radius: 50%;
margin: 0 10px 0 0;
.plus.active
background-color: #d6d6d6dd;
.plus.active:hover
background-color: #d6d6d6dd;
.th
color: #4b4b4b;
border-radius: 50%;
padding: 10px;
font-size: 20px;
margin: 0 10px 0 0;
.fa-th.active
background-color: #d6d6d6dd;
.fa-th.active:hover
background-color: #d6d6d6dd;
.account
width: 35px;
border-radius: 50%;
padding: 5px;
margin: 0 15px 0 0;
.account.active
background-color: #d6d6d6dd;
.account.active:hover
background-color: #d6d6d6dd;
.account:hover,
.th:hover,
.plus:hover
background-color: rgb(243, 243, 243);
.side-menu
display: flex;
position: fixed;
transform: translateX(-300px);
.side-menu *
color: #4e4e4e;
.main-menu
min-width: 300px;
background-color: #fff;
height: 100vh;
top: 0;
.question-mark
width: 20px;
position: fixed;
bottom: 0;
margin: 0 0 20px 20px;
border-radius: 50%;
padding: 10px;
.up
display: flex;
cursor: pointer;
.one
padding: 18px 18px 20px 10px;
margin: 10px 5px 0 0;
background-color: #dcf2ff;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
.fa-home
font-size: 20px;
margin: 0 0 0 10px;
.one li a p
font-size: 14px;
font-weight: bold;
margin: 0 0 0 20px;
.two
padding: 18px 18px 20px 10px;
margin: 0px 5px 10px 0;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
transition: none;
.two:hover
background-color: #f7f7f7;
.fa-calendar
font-size: 20px;
margin: 0 0 0 12px;
.two li a p
font-size: 14px;
font-weight: bold;
margin: 0 0 0 23px;
.three
padding: 18px 18px 20px 10px;
margin: 5px 5px 10px 0;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
transition: none;
.three:hover
background-color: #f7f7f7;
.fa-cog
font-size: 20px;
margin: 0 0 0 10px;
.three li a p
font-size: 14px;
font-weight: bold;
margin: 0 0 0 23px;
.top-two
border-bottom: 1px solid #ddd;
.question-mark:hover
background-color: #ddd;
@media screen and (max-width: 480px)
#nine-dot,
.account
display: none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Classes</title>
<link rel="icon" href="clas-s-room.png">
<link rel="stylesheet" href="/Coding/Google Clas-s-room/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/5c25faca78.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="nav_bar">
<div class="left">
<ul>
<li>
<a href="#">
<i class="fas fa-bars"></i>
</a>
</li>
<li>
<a href="#">
<svg class="google-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 92" >
<path fill="#EA4335" d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
<path fill="#FBBC05" d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
<path fill="#4285F4" d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z"/>
<path fill="#34A853" d="M225 3v65h-9.5V3h9.5z"/>
<path fill="#EA4335" d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z"/>
<path fill="#4285F4" d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z"/>
</svg>
</a>
</li>
<li>
<a href="#">
<p class="clas-s-room">Clas-s-room</p>
</a>
</li>
</ul>
</div>
<div class="right">
<ul>
<li>
<a href="#"><img class="plus" src="plus.png" ></a>
</li>
<li><a href="#"><i id="nine-dot" class="fas fa-th th"></i></a></li>
<li>
<a href="#"><img class="account" src="account.png" ></a>
</li>
</ul>
</div>
</nav>
</header>
<aside id="menu" class="side-menu">
<div class="main-menu">
<div class="top-two">
<div>
<ul class="up one">
<li>
<a href="#"><i class="fas fa-home"></i></a>
</li>
<li>
<a href="#">
<p>Classes</p>
</a>
</li>
</ul>
</div>
<div>
<ul class="up two">
<li>
<a href="#">
<i class="far fa-calendar"></i>
</a>
</li>
<li>
<a href="#">
<p>Calendar</p>
</a>
</li>
</ul>
</div>
</div>
<div>
<ul class="up three">
<li>
<a href="#">
<i class="fas fa-cog"></i>
</a>
</li>
<li>
<a href="#">
<p>Settings</p>
</a>
</li>
</ul>
</div>
</div>
<div>
<img class="question-mark" src="Question.png" >
</div>
</aside>
<script src="/Coding/Google Clas-s-room/script.js"></script>
</body>
</html>
【问题讨论】:
可以使用 jquery 或 javascript 关闭菜单吗? 【参考方案1】:使用
跳过容器$(document).mouseup(function (e)
var container = $(".side-menu");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0)
$('.side-menu').css(
'transform': 'translateX(-300px)',
'box-shadow': 'none'
);
);
$(document).ready(function()
$('i.fa-bars').on('click', function()
$(this).toggleClass('active');
$('.side-menu').css(
'transform': 'translateX(0px)',
'box-shadow': '5px 5px 5px #ddd'
);
);
$('.plus').on('click', function()
$(this).toggleClass('active');
);
$('i.fa-th').on('click', function()
$(this).toggleClass('active');
);
$('.account').on('click', function()
$(this).toggleClass('active');
);
);
$(document).mouseup(function (e)
var container = $(".side-menu");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0)
$('.side-menu').css(
'transform': 'translateX(-300px)',
'box-shadow': 'none'
);
);
*
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
font-family: sans-serif;
color: black;
transition: .3s;
/*
hover color: #fafafa;
clicked color: #ddd;
*/
.nav_bar
border-bottom: 1px solid #dddddd;
display: flex;
justify-content: space-between;
line-height: 65px;
position: fixed;
width: 100%;
.nav_bar *
display: flex;
align-items: center;
.left ul, .right ul
display: flex;
i.fa-bars
font-size: 20px;
color: #535353;
padding: 10px;
border-radius: 50%;
margin: 0 0px 0 15px;
i.fa-bars:hover
background-color: #f8f8f8;
.fa-bars.active
background-color: #d6d6d6dd;
.fa-bars.active:hover
background-color: #d6d6d6dd;
.google-icon
cursor: default;
transform: translateY(1px) translateX(4px);
.clas-s-room
font-size: 22px;
cursor: text;
color: #353535;
.plus
width: 20px;
padding: 10px;
border-radius: 50%;
margin: 0 10px 0 0;
.plus.active
background-color: #d6d6d6dd;
.plus.active:hover
background-color: #d6d6d6dd;
.th
color: #4b4b4b;
border-radius: 50%;
padding: 10px;
font-size: 20px;
margin: 0 10px 0 0;
.fa-th.active
background-color: #d6d6d6dd;
.fa-th.active:hover
background-color: #d6d6d6dd;
.account
width: 35px;
border-radius: 50%;
padding: 5px;
margin: 0 15px 0 0;
.account.active
background-color: #d6d6d6dd;
.account.active:hover
background-color: #d6d6d6dd;
.account:hover, .th:hover, .plus:hover
background-color: rgb(243, 243, 243);
.side-menu
display: flex;
position: fixed;
transform: translateX(-300px);
.side-menu *
color: #4e4e4e;
.main-menu
min-width: 300px;
background-color: #fff;
height: 100vh;
top: 0;
.question-mark
width: 20px;
position: fixed;
bottom: 0;
margin: 0 0 20px 20px;
border-radius: 50%;
padding: 10px;
.up
display: flex;
cursor: pointer;
.one
padding: 18px 18px 20px 10px;
margin: 10px 5px 0 0;
background-color: #dcf2ff;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
.fa-home
font-size: 20px;
margin: 0 0 0 10px;
.one li a p
font-size: 14px;
font-weight: bold;
margin: 0 0 0 20px;
.two
padding: 18px 18px 20px 10px;
margin: 0px 5px 10px 0;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
transition: none;
.two:hover
background-color: #f7f7f7;
.fa-calendar
font-size: 20px;
margin: 0 0 0 12px;
.two li a p
font-size: 14px;
font-weight: bold;
margin: 0 0 0 23px;
.three
padding: 18px 18px 20px 10px;
margin: 5px 5px 10px 0;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
transition: none;
.three:hover
background-color: #f7f7f7;
.fa-cog
font-size: 20px;
margin: 0 0 0 10px;
.three li a p
font-size: 14px;
font-weight: bold;
margin: 0 0 0 23px;
.top-two
border-bottom: 1px solid #ddd;
.question-mark:hover
background-color: #ddd;
@media screen and (max-width: 480px)
#nine-dot, .account
display: none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Classes</title>
<link rel="icon" href="clas-s-room.png">
<link rel="stylesheet" href="/Coding/Google Clas-s-room/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/5c25faca78.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="nav_bar">
<div class="left">
<ul>
<li>
<a href="#">
<i class="fas fa-bars"></i>
</a>
</li>
<li>
<a href="#">
<svg class="google-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 272 92" >
<path fill="#EA4335" d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
<path fill="#FBBC05" d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"/>
<path fill="#4285F4" d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z"/>
<path fill="#34A853" d="M225 3v65h-9.5V3h9.5z"/>
<path fill="#EA4335" d="M262.02 54.48l7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98l19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z"/>
<path fill="#4285F4" d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z"/>
</svg>
</a>
</li>
<li><a href="#"><p class="clas-s-room">Clas-s-room</p></a></li>
</ul>
</div>
<div class="right">
<ul>
<li><a href="#"><img class="plus" src="plus.png" ></a></li>
<li><a href="#"><i id="nine-dot" class="fas fa-th th"></i></a></li>
<li><a href="#"><img class="account" src="account.png" ></a></li>
</ul>
</div>
</nav>
</header>
<aside id="menu" class="side-menu">
<div class="main-menu">
<div class="top-two">
<div>
<ul class="up one">
<li>
<a href="#"><i class="fas fa-home"></i></a>
</li>
<li><a href="#">
<p>Classes</p></a>
</li>
</ul>
</div>
<div>
<ul class="up two">
<li>
<a href="#">
<i class="far fa-calendar"></i>
</a>
</li>
<li>
<a href="#">
<p>Calendar</p>
</a>
</li>
</ul>
</div>
</div>
<div>
<ul class="up three">
<li>
<a href="#">
<i class="fas fa-cog"></i>
</a>
</li>
<li>
<a href="#">
<p>Settings</p>
</a>
</li>
</ul>
</div>
</div>
<div>
<img class="question-mark" src="Question.png" >
</div>
</aside>
<script src="/Coding/Google Clas-s-room/script.js"></script>
</body>
</html>
【讨论】:
谁能解释一下这段代码带来了什么影响?&& container.has(e.target).length === 0)
它检查点击的元素不是容器(菜单)的后代,因为你不希望点击菜单内的元素关闭它。以上是关于单击其他位置时关闭侧边菜单的主要内容,如果未能解决你的问题,请参考以下文章
swrevealviewcontroller 在侧边菜单打开/关闭时更改切换按钮图像?
单击按钮时 Shinydashboard 的 SidebarMenu 中的折叠(关闭)菜单