Нокаут: нажмите на другое место страницы и спрячьте элемент

Question

Я создаю меню уровня 2, поэтому, щелкнув элемент topmenu, подменю появится, если щелкнуть по другим местам страницы, а не самому подменю, подменю должно скрываться. Я не склоняюсь к добавлению привязки клика к тегу body, это все равно не сработает, но что я могу сделать для этого? вот мой код.

<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")); 

Answer 1

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

Refer Here knockout delegate event

Answer 2

Если вы проверить, как Twitter Bootstrap делает его выпадающие, это добавляет событие в html элемент:

Внутри Dropdown определение класса:

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

Вы могли бы попробовать что-то аналогичный.