应用自定义指令实现如下功能：单击“单击显示下拉菜单”按钮弹出一个下拉菜单，单击页面中除了下拉菜单本身之外的其他区域后隐藏下拉菜单内容

在Web应用程序中，你可以通过JavaScript和HTML结合来实现这个功能。首先，创建一个HTML元素作为按钮，并添加一个`onclick`事件处理程序来触发下拉菜单的显示：

<button id="dropdownButton" onclick="showDropdown()">单击显示下拉菜单</button>
<div id="dropdownMenu" class="hidden">
  <!-- 下拉菜单内容 -->
</div>

然后，在CSS中定义`.hidden`类来隐藏下拉菜单：

.hidden {
  display: none;
}

接下来编写JavaScript函数`showDropdown()`，当按钮被点击时，它会切换下拉菜单的显示状态：

function showDropdown() {
  var dropdownMenu = document.getElementById('dropdownMenu');
  dropdownMenu.classList.toggle('hidden');
}

在这个`showDropdown`函数里，我们获取了`dropdownMenu`元素并更改其`class`属性，如果当前为`hidden`，就移除`hidden`；反之，就添加上。

为了实现点击页面其他区域隐藏下拉菜单的功能，可以在整个文档上监听鼠标离开事件(`mouseout`)，当鼠标离开下拉菜单范围时，再次调用`hideDropdown`函数：

document.addEventListener('mouseout', hideDropdown);

function hideDropdown(event) {
  if (!dropdownMenu.contains(event.target)) {
    showDropdown();
  }
}

这里假设`dropdownMenu`元素包含了所有的下拉菜单项。当鼠标离开页面时，检查目标元素是否在下拉菜单内，如果不是，则调用`showDropdown`，将下拉菜单重新显示。