点击后隐藏css菜单答案

【问题标题】：hide css menu after click点击后隐藏css菜单
【发布时间】：2012-02-23 04:50:56
【问题描述】：

我有一个类似的菜单：

<ul class="sub">
    <li><a href="#">New</a></li>
    <li><a href="#">Open</a></li>
    <li><a href="#">Save</a></li>
    <li><a href="#">Help</a></li>
</ul>

通过 CSS 悬停代码“动画化”（没什么特别的）。打开选项启动文件打开功能（通过隐藏的“输入类型=文件”控件）。这一切都很好，但是当我完成“文件打开”对话框时，菜单仍然显示（虽然很短暂）。有没有办法让菜单在单击“打开”后立即消失，甚至在“打开对话框”运行之前就在屏幕上呈现（消失）？ TIA

【问题讨论】：

你有工作代码的例子，也许是一个 jsfiddle？
这是使用 rgthree 的解决方案（或多或少）的结果：jsfiddle.net/djprog/7ZLU3

标签： css menu click

【解决方案1】：

您要做的是在窗口模糊时隐藏子菜单。不确定您是否使用的是 JS 库，但它只是如下所示。这是一个通用的 jsfiddle：http://jsfiddle.net/rgthree/b6QSP/

window.onblur = function(){
  // Where "submenu" is the sub menu to hide,
  // however you're targeting it
  submenu.style.display = 'none';
}

【讨论】：

【解决方案2】：

为“打开”选项添加点击事件监听器：

var openLink = document.getElementById('open'); // replace 'open' with element's ID
openLink.addEventListener('click', clickHandler, false);
function clickHandler() {
  var submenu = document.getElementById('submenu'); // replace 'submenu' with submenu's ID
  submenu.style.display = 'none';
}

【讨论】：