下拉菜单隐藏点击事件

Question

问题

如何在点击事件中隐藏我的菜单

背景

我在单页应用程序中使用纯 CSS3 菜单。效果很好。

身体 { 字体：正常 .8em/1.5em Arial、Helvetica、sans-serif； 背景：#ebebeb； 宽度：900px； 边距：100px 自动； 颜色：#666； } 一个 { 颜色：#333； } #导航{ 边距：0； 填充：7px 6px 0； 行高：100%； 边界半径：2em； -webkit-border-radius：2em； -moz-边界半径：2em； -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 背景：#8b8b8b； /* 对于非 css3 浏览器 */ 过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a'); /* 对于 IE */ 背景：-webkit-gradient（线性，左上，左下，从（#a9a9a9），到（#7a7a7a））； /* 对于 webkit 浏览器 */ 背景：-moz-linear-gradient（顶部，#a9a9a9，#7a7a7a）； /* 对于 Firefox 3.6+ */ 边框：实心 1px #6d6d6d; } #nav李{ 边距：0 5px； 填充：0 0 8px； 向左飘浮; 位置：相对； 列表样式：无； } /* 主层链接 */ #导航一个{ 字体粗细：粗体； 颜色：#e7e5e5； 文字装饰：无； 显示：块； 填充：8px 20px； 边距：0； -webkit-border-radius：1.6em； -moz-边界半径：1.6em； 文本阴影：0 1px 1px rgba(0, 0, 0, .3); } /* 主关卡链接悬停 */ #nav .current a, #nav li:hover > a { 背景：#d1d1d1； /* 对于非 css3 浏览器 */ 过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* 对于 IE */ 背景：-webkit-gradient（线性，左上，左下，从（#ebebeb），到（#a1a1a1））； /* 对于 webkit 浏览器 */ 背景：-moz-linear-gradient（顶部，#ebebeb，#a1a1a1）； /* 对于 Firefox 3.6+ */ 颜色：#444； 边框顶部：实心 1px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); 盒子阴影：0 1px 1px rgba(0, 0, 0, .2); 文字阴影：0 1px 0 rgba(255, 255, 255, .8); } /* 子级别链接悬停 */ #nav ul li:hover a, #nav li:hover li a { 背景：无； 边框：无； 颜色：#666； -webkit-box-shadow：无； -moz-box-shadow：无； } #nav ul a:悬停{ 背景：#0399d4 ！重要； /* 对于非 css3 浏览器 */ 过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* 对于 IE */ 背景：-webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* 对于 webkit 浏览器 */ 背景：-moz-linear-gradient（顶部，#04acec，#0186ba）！重要； /* 对于 Firefox 3.6+ */ 颜色：#fff！重要； -webkit-border-radius：0； -moz-边界半径：0； 文字阴影：0 1px 1px rgba(0, 0, 0, .1); } /* 二级列表 */ #导航 ul { 背景：#ddd； /* 对于非 css3 浏览器 */ 过滤器：progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* 对于 IE */ 背景：-webkit-gradient（线性，左上，左下，从（#fff），到（#cfcfcf））； /* 对于 webkit 浏览器 */ 背景：-moz-linear-gradient（顶部，#fff，#cfcfcf）； /* 对于 Firefox 3.6+ */ 显示：无； 边距：0； 填充：0； 宽度：185px； 位置：绝对； 顶部：35px； 左：0； 边框：实心 1px #b4b4b4; -webkit-border-radius：10px； -moz-边界半径：10px； 边框半径：10px； -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3); 盒子阴影：0 1px 3px rgba(0, 0, 0, .3); } /* 落下 */ #nav li:hover > ul { 显示：块； } #nav ul li { 浮动：无； 边距：0； 填充：0； } #nav ul一个{ 字体粗细：正常； 文字阴影：0 1px 1px rgba(255, 255, 255, .9); } /* 3+ 级列表 */ #nav ul ul { 左：181px； 顶部：-3px； } /* 第一个和最后一个孩子的圆角 */ #nav ul li:first-child > a { -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft：9px； -webkit-border-top-right-radius: 9px; -moz-border-radius-topright：9px； } #nav ul li:last-child > a { -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft：9px； -webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright：9px； } /* 清除修复 */ #nav：在{之后 内容： ”。”; 显示：块； 明确：两者； 可见性：隐藏； 行高：0； 高度：0； } #导航{ 显示：内联块； } html [xmlns] #导航{ 显示：块； } * html #导航{ 高度：1%； }

CSS3 Dropdown Menu 由 Web Designer Wall

Answer 1

假设您的问题是“我需要用 Javascript 做什么？”，隐藏下拉列表的最简单方法之一是使用框架，例如 jQuery。使用 jQuery 可以让您编写类似（未经测试）的内容：

$('#parent_li').click(function(){
    $('#child_li').slideToggle('slow');
});

这将切换列表项的子列表的可见性状态。在这种情况下，使用慢速滑动动画，但您可以使用其他动画类型。

Answer 2

请检查以下链接是否有帮助

<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />

<span></span>
<span></span>
<span></span>

<ul id="menu">
  <a href="#"><li>Home</li></a>
  <a href="#"><li>About</li></a>
  <a href="#"><li>Info</li></a>
  <a href="#"><li>Contact</li></a>
  <a href="https://erikterwan.com/" target="_blank"><li>Show me more</li> 
  </a>
 </ul>
 </div>
</nav>

https://codepen.io/erikterwan/pen/EVzeRP