仅在单击父项后打开子菜单

Question

我想我的问题以前已经回答过很多次了，但我找不到我的确切情况。

我有一个带有子菜单的垂直菜单，我想仅在单击父级（而不是悬停）时显示子菜单，一次只显示一个子菜单，然后单击菜单外的某个位置后，我希望子菜单消失。

这就是我现在所拥有的——它基于现在的悬停。我尝试将 a:hover 更改为类似 a:active 的东西，但效果不佳（我的 CSS 不太好）。

/* 容器 */ #cssmenu > ul { 显示：块； 位置：相对； //宽度：190px； 宽度：100%； } /* 包含链接的列表元素 */ #cssmenu > ul li { 显示：块； 位置：相对； 边距：0； 填充：0； 宽度：100%； } /* 通用链接样式 */ #cssmenu > ul li a { 显示：块； 位置：相对； 边距：2； 宽度：95%； 高度：50 像素； 背景颜色：#ABC578; 左边框：实心 0px #FFFFFF; 边框底部：实心 1px #FFFFFF; 字体：0.7em Tahoma，无衬线； 字体大小：14px； 字体粗细：粗体； 颜色：#FFFFFF； 文字装饰：无； 填充顶部：30px； } /* 菜单/子菜单链接的悬停状态 */ #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a { 颜色：#fff; 文本阴影：0 1px 0 rgba(0, 0, 0, .3); 背景：#82c500； 背景：-webkit-linear-gradient（底部，#82c500，#000000）； 背景：-ms-linear-gradient（底部，#82c500，#000000）； 背景：-moz-linear-gradient（底部，#82c500，#000000）； 背景：-o-线性渐变（底部，#82c500，#000000）； 边框颜色：透明； } /* 指示子菜单的箭头 */ #cssmenu > ul .has-sub>a::after { 内容： ''; 位置：绝对； 顶部：34px； 右：8px； 宽度：0px； 高度：0px； /* 使用边框创建箭头 */ 边框：4px纯透明； 左边框：4px 实心#d8d8d8； } /* 相同的箭头，但颜色更深，以创建阴影效果 */ #cssmenu > ul .has-sub>a::before { 内容： ''; 位置：绝对； 顶部：35px； 右：8px； 宽度：0px； 高度：0px； /* 使用边框创建箭头 */ 边框：4px纯透明； 左边框：4px 实心#000； } /* 改变鼠标悬停时的颜色 */ #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after { 左边框：4px 实心#fff； } #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before { 左边框：4px 实心 rgba(0, 0, 0, .3); } /* 子菜单 */ #cssmenu > ul ul { 位置：绝对； 左：95%； 宽度：100%； 顶部：-9999 像素； 左填充：5px； 不透明度：0； /* 使用不透明过渡创建的淡入淡出效果 */ -webkit-transition：不透明度 .2s 缓入； -moz-transition：不透明度 .2s 缓入； -o-transition：不透明度 .2s 缓入； -ms-transition：不透明度 .2s 缓入； } /* 当用户悬停父链接时显示子菜单 */ #cssmenu > ul li:hover>ul { 顶部：-2px； 不透明度：1； }

请问有人有什么想法吗？

Answer 1

好的，我用这个来解决我的问题：How do I detect a click outside an element?

现在我在网站的页脚中有这样的东西：

$('html').click(function() { 隐藏子菜单（）； }); $("#cssmenu").click(函数(事件){ event.stopPropagation(); });

当我点击子菜单时，我调用 subMenu 函数显示子菜单：

    <div id='cssmenu'>
    <ul>
      <li class='has-sub '><a href='#' onclick="subMenu('handleSubMenu1')">
    ...

Answer 2

据我所知，你不能单独使用 CSS 来做到这一点，你需要使用 javascript/jQuery。