![](/img/trans.png)
[英]hide an element when click any other place(outside the element) on the page
[英]Knockout: click other place of the page and hide the element
我正在創建一個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"));
如果您查看Twitter Bootstrap如何執行其下拉菜單,則會將事件添加到html
元素:
內部Dropdown類定義:
...
$('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();
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.