Question

当我点击DIV 1时，它会显示下拉列表。现在，我想在单击默认选项卡时隐藏下拉菜单，或者单击页面上的任何其他位置以关闭下拉菜单。我如何为此编写JavaScript代码？

HTML

<div id="dropdown-container">
    <div id="default-tab" onclick="toggleMenu()"><a href="#">1</a></div>
        <ul id="dropdown">
            <li ><a href="#"><span class="current-browse">2</span></a>
                <ul class="dropdown-items">
                    <li class="dropdown-item"><a href="#">3</a></li>
                    <li class="dropdown-item""><a href="#">4</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

的Javascript

function toggleMenu() {
    var dropDown = document.getElementById('dropdown');    
    if(dropdown.style.display == "block") { 
         dropdown.style.display = "none";
    } else { 
         dropdown.style.display = "block";
    }
}

下拉列表的CSS有display：none;

Answer 1

LINK：http://stackoverflow.com/questions/321239/event-on-a-click-everywhere-on-the-page-outside-of-the-specific-div.

您可以使用上述链接中的一种解决方案。您需要的只是一种向onclick对象的document事件添加处理程序的方法。

您的代码在DIV上有onclick事件时已经正常工作1.除非它在第一次点击时不起作用。所以只需在ur标记中添加以下内容，以便第一次正常工作。

<ul id="dropdown" style="display:block;">

Answer 2

This article是您正面临的问题的绝佳解释，以及为什么stopPropagation解决方案是一个坏主意。由于您没有使用JQuery，您想要做的事情看起来更像是这样：

document.onclick = function(event) {
  if (!event.target.closest('#dropdown-container')) {
    dropdown.style.display = "none";
  }
}

将其放在toggleMenu函数之外，只要点击页面上的任何其他内容，它就应该隐藏您的菜单而不会为其他库创建意外行为（错误）。

如何通过onlick触发div来切换/重新隐藏div？

2 个答案: