Question

我目前正在制作一个弹出菜单的任务，这是我的代码：

    <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中的此菜单。现在这是我的问题。点击其他任何地方后，我需要此菜单返回隐身状态。换句话说，在点击这个div后，我需要div不可见。有什么建议吗？

Answer 1

您可以将调用绑定到一个新函数，使该元素不可见。

在页面末尾，添加以下脚本：

<script language="javascript" type="text/javascript">
    function dropMenu() {
        document.getElementById('dropdown').style.display = 'block';
    }        

    function hideMenu() {
        document.getElementById('dropdown').style.display = 'none';
    }        

    document.attachEvent('onclick', hideMenu);
</script>

通过在文档的onclick事件上附加hideMenu函数，文档的每个子元素（即BODY标记内的每个元素，这些元素中的元素等等），当单击时，将触发hideMenu函数。嗯，有点像，你会看到前方。

它包含用户名锚点。所以，奇怪的是，当你点击用户名锚点时，它会调用dropMenu函数，定义为锚点的onclick事件处理程序，事件将“冒泡”，导致它在锚点的每个父元素处触发，最后到达文档，我们已经将hideMenu事件定义为onclick事件处理程序，导致它再次隐藏下拉锚点。

事实上，这种“冒泡”机制是导致hideMenu的印象被调用文件中的每个元素的事实，实际上，点击元素的点击事件只会冒泡直到到达文档，触发他的经纪人。

因此，我们必须稍微修改dropMenu函数以避免这种冒泡效应：

    function dropMenu() {
        window.event.cancelBubble = true;
        document.getElementById('dropdown').style.display = 'block';
    }

现在，当我们点击用户名锚点时，将显示下拉式锚点，并将保持显示。当我们点击页面的任何地方时，它将被隐藏。

之所以发生这种情况，是因为我们已将窗口事件对象的cancelBubble属性设置为 true ，表示此事件可能不会冒泡，因此文档onclick处理程序不会触发。

我希望这个解释清楚明确并且有用。

使用js进行单击操作

1 个答案: