0

我正在尝试制作一个从视图中隐藏但通过触摸/单击屏幕显示的导航菜单。

我看到的问题是触摸/单击屏幕上的许多地方可以打开导航菜单，同时触发可能在附近的任何按钮、链接等的事件。

到目前为止，我正在尝试使用:notjQuery 中的一个子句来处理这个问题。不幸的是，:not无论您在body.

HTML：

<div id="NavigationMenu">i'm the navigation menu</div>
<div class="icon-reorder">toggle</div>
<div id="main_content">i'm the main content
  <button type="button">button</button>
</div>​

JS：

$(document.body).on('click', ['body:not(".btn, a, i, button, input, textarea")', '.icon-reorder'], function(){
    console.log('clicked');
    $('#NavigationMenu').toggle();
    $('#main_content').toggle();
});

$('button').on('click', this, function(){
   console.log('button clicked');
});

有人可以帮助处理这段代码吗？或者这甚至是解决这个问题的正确方法吗？对我来说，它看起来有点 hack-ish。

这个导航菜单是我网站的主要菜单，所以有一个烦人的 UI/UX（导航打开太多/太少）是一个交易破坏者。我主要对触摸兼容代码感兴趣，但欢迎任何和所有 UI/UX 建议......

4

1 回答 1

2

与其使用:not子句，不如使用事件委托（我两个月前才知道，这是一个花哨的术语，用于在父元素上使用回调处理事件）

$(body).on("click", function(event) {
  if(event.target.type !== "button" && <whatever other conditions>) {
       <toggle menu>
  }
});

这是一个更新的Fiddle。我正在将点击事件对象记录到控制台，以便您可以查看 event.target 并查看是否有更适合您需要的内容进行比较

于 2012-06-30T17:25:28.517 回答