Javascript 淘汰：单击页面的其他位置并隐藏元素

我正在创建一个2级菜单，因此单击topmenu项，子菜单将显示，如果单击页面的其他位置而不是子菜单本身，子菜单应隐藏。我并不倾向于在body标签上添加一个click绑定，它无论如何都不会起作用，但是我能做些什么来实现这一点呢？ 这是到目前为止我的代码

<div id="menuholder">
<ul id="topmenu">
    <li  data-bind="click: showMenu.bind($data, 1)">top menu item</li>
    <ul class="submenu" data-bind="visible: selected() == '1'">
         <li><a href="#">submenu item</a></li>
    </ul>
</ul>
</div>
<script type="text/javascript">
var menuModel = function () {
    var self = this;
    self.selected = ko.observable(0);
    self.showMenu = function (data) {
        var s = self.selected();
        if (s > 0 && data == s)
            self.selected(0);
        else
            self.selected(data);
    };
    self.hideMenu = function () {
        self.selected(0);
    }
}
ko.applyBindings(new menuModel(), document.getElementById("menuHolder"));

顶部菜单项




var menuModel=函数（）{
var self=这个；
自选择=可观察的ko（0）；
self.showMenu=功能（数据）{
var s=self.selected（）；
如果（s>0&&data==s）
自选（0）；
其他的
自选（数据）；
};
self.hideMenu=函数（）{
自选（0）；
}
}
ko.applyBindings（新的menuModel（），document.getElementById（“menuHolder”）；

如果您查看它的下拉列表，它会向

html

元素添加一个事件：

内部下拉类定义：

...
  $('html').on('click.dropdown.data-api', function () {
      $el.parent().removeClass('open')
  })

您可以尝试类似的操作。

如果您查看其下拉列表，它会向

html

元素添加一个事件：

$('yourParentDivId').click(function(e) {  
    if (!( $(e.target).is('topmenu') && $(e.target).is('submenu') ) ) {  
        alert('clicked');  
        self.hideMenu();
    }  
});  

内部下拉类定义：

...
  $('html').on('click.dropdown.data-api', function () {
      $el.parent().removeClass('open')
  })

你可以试试类似的

$('yourParentDivId').click(function(e) {  
    if (!( $(e.target).is('topmenu') && $(e.target).is('submenu') ) ) {  
        alert('clicked');  
        self.hideMenu();
    }  
});  

---

这正是我想要的。工作很有魅力！这正是我想要的。工作很有魅力！