我目前正在做一个弹出菜单的任务，下面是我的代码：
<script type="text/javascript">
function dropMenu(){
document.getElementById('dropdown').style.visibility = 'visible';
document.getElementById('dropdown').style.display = 'block';
}
</script>这是我使用js函数的div：
<div class="user-menu">
<ul>
<li><a href="#"><span>[History]</span></a></li>
<li>
<a href="#" id="username" onclick="dropMenu()">
<span>${currentUserDetails.firstName} ${currentUserDetails.lastName}</span>
</a>
<div>
<ul>
<li>
<a href="#" id="dropdown" style="display:none;">
<span>Log Out</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>正如你所看到的，我使用js函数使这个菜单在点击时可见。现在我的问题是，我需要这个菜单在点击其他任何地方后返回不可见。换句话说，在点击这个div后，我需要这个div不可见。有什么建议吗？
1条答案
按热度按时间uyto3xhc1#
您可以将调用绑定到一个新函数，使元素不可见。
在页面末尾添加以下脚本：
通过在文档的onclick事件上附加hideMenu函数，文档的每个子元素（即BODY标记中的每个元素，以及插入这些元素的元素，等等）在被单击时都会触发hideMenu函数，就像前面看到的那样。
它包含了用户名锚，所以奇怪的是，当你点击用户名锚点时，它会调用dropMenu函数，该函数被定义为锚点的onclick事件处理器，然后事件会“冒泡”，导致它在锚点的每个父元素上触发，最终到达文档，我们已经将hideMenu事件定义为onclick事件处理器，导致它再次隐藏下拉锚点。
事实上，这种“冒泡”机制会给人一种印象，以为文档中的每个元素都调用了hideMenu，而实际上，被单击元素的click事件只会冒泡，直到到达文档，并触发其处理程序。
因此，我们必须稍微修改dropMenu函数以避免这种冒泡效果：
现在，当我们点击用户名锚时，下拉锚点将显示出来，并保持显示。当我们点击页面的任何地方时，它将被隐藏。
发生这种情况是因为我们将窗口事件对象的cancelBubble属性设置为true，表示此事件不会冒泡，因此文档onclick处理程序不会触发。
我希望这个解释清楚并有用。